Сразу хочется предупредить, что ни в статье, ни в комментах не стоит обсуждать нужен айПад или не нужен. Нам, как веб-разработчикам просто необходимо согласиться с фактом, что уже миллионы владельцев айПадов ходят по улицам, летают на самолетах или сидят дома, наслаждаясь теплом домашнего вайфая. Эти самые владельцы очень щепетильные и придирчивые пользователи, и они очень хотят чтобы приложения, которые они используют, хорошо работали и эстетично выглядели на их девайсе.

Наша задача - уметь такие приложения делать, ведь мы очень любим наших пользователей, правда?

Как вы думаете, напишу ли я в будущем статью вроде “Оптимизация сайта для iPod Shuffle и Nano”?

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

Итак, начнем.

Иконка приложения

Про это уже была небольшая статья. Но здесь надо повториться.
Когда мы добавляем закладку “Домой” (можно сказать на рабочий стол), мы можем задать иконку, которая будет отображаться.

Задается иконка следующим образом:

 <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> 

С появлением четвертого айФона и айПада, требование к этой иконке изменились - теперь она должна быть размером 114x114 для айфона или 72x72 для айпада. В общем-то размер этой иконки может быть и больше, сафари самостоятельно сожмет до нужного разрешения и добавит “стеклянность” иконке. Если стеклянность иконке не к лицу, тогда вместо apple-touch-icon следует прописывать apple-touch-icon-precomposed:

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png" />

Полноэкранный режим

По-умолчанию закладка с рабочего стола запускает веб-сайт в нормальном режиме сафари - с адресной строкой.
Чтобы приложение открылось в полноэкранном режиме, необходим такой мета-тег:

 <meta name="apple-mobile-web-app-capable" content="yes" />

Скрываем статус-бар

Для того, чтобы изменить статус-бар, используется мета-тег apple-mobile-web-app-status-bar-style

 <meta name="apple-mobile-web-app-status-bar-style" content="default" />

content здесь может быть один из трех вариантов - default, black или black-translucent.

Отключаем зум

Для управления зумом используется мета-тег viewport. Отключаем возможность зумить:

 <meta name="viewport" content="user-scalable=no, width=device-width" />

Картинка загрузки (splash image)

Если такая картинка не будет задана, то при открытии приложения, будет показан скриншот последнего состояния приложения.

 <link rel="apple-touch-startup-image" href="./startup.png" />

Картинка должна быть точно следующих размеров (иначе устройство его не примет):

• 320x480 (iPhone < 4, iPod Touch)
• 640x960 (iPhone 4, новый iPod Touch)
• 768x1004 (iPad portrait)
• 1024x748 (iPad landscape)

Все описанные выше пункты позволять создать веб-приложение используя html, css и javascript, которое будет внешне выглядеть как нативное. Да, его нельзя опубликовать в апп стор, но если приложение.

Ориентация экрана

В зависимости от ориентации айДевайса возможно вы захотите по-разному отображать содержимое. Самое простое - использовать такие объявления css:

 <link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”>
 <link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”> 

portrait.css будет использован для портретной ориентации, а landscape.css соответственно для ландшафтной.

С помощью js также можно отловить событие поворота экрана. Для этого служит событие orientationchange

 window.addEventListener('orientationchange', ChangeOrientation, false);
 
 function ChangeOrientation() {
  var orientation = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait';
  alert(orientation);
 }
 

Избавляемся от эластичного скролла

В сафари есть замечательная фича - эластичный скролл в конце и начале страницы. Нечто подобное я когда-то делал с помощью jQuery в этой статье. Демо здесь. Чтобы создать еще более достоверную имитацию нативного приложения, от этой фичи можно избавиться парой строчек js

 <script>
 function NoElasticScroll(e) {
  e.preventDefault(); }
 </script> 
<body ontouchmove="NoElasticScroll(event);" >
</body>

Определение iOS

Для того, чтобы определить, на каком из айДевайсов просматривается страница, можно использовать следующий сниппет:

 var Device = {};

Device.isiPhone = function() {
   return navigator.userAgent.indexOf('iPhone') != -1;
}
Device.isiPod = function() {
   return navigator.userAgent.indexOf('iPod') != -1;
}
Device.isiPad = function() {
   return navigator.userAgent.indexOf('iPad') != -1;
}
Device.isiOS = function() {
   return Device.isiPhone || Device.isiPod || Device.isiPad;
}

Вот как выглядит ЮзерАгент у этих девайсов:

iPhone:

 Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3 

iPod (старый):

 Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/3A101a Safari/419.3 

iPad:

 Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) version/4.0.4 Mobile/7B367 Safari/531.21.10 

Инструменты, библиотеки

C самого появления айПада, на свет стали рождаться различные фреймворки, плагины для фреймворков, плагины для плагинов фреймворков и так далее.
Яблочники сделали для айПада страничку с хелпом, которая работала как нативное приложение. Там использовался своя наработка, которая называлась AdLib. В интернетах ее прозвали “секретным фреймворком Эпла” )) линк.

Прошло некоторое время и появились не такие секретные наработки.

jQTouch

Это jQuery-плагин, призванный упростить разработку веб-приложений. Все весьма просто и понятно. Анимация работает замечательно только на iPhone, iPod Touch. На айпаде некоторые виды анимации глючат - поэтому желательно предварительно проверить, если вы хотите, например использовать поворот куба. А на андроиде вообще желательно обойтись без анимации. Во всяком случае, на моем Герое, css-трансформация работает очень... неприятно.

Sencha Touch

Сенча - это такой зеленый чай, производится в Японии.

Сенча Тач - это объединение вышеупомянутого jQTouch, extJS и Raphaël (последняя библиотека - разработка Дмитрия Барановского, упрощающая работу с векторной графикой на вебе).

Сенча Тач позиционируется как ДжаваСкрипт-фреймворк для разработки веб-приложений для тач-девайсов iOS и Android. На сайте доступно много демок. Рекомендую заценить.

iScroll

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

Slablet

Слаблет - это CSS/jQuery фреймворк для создания веб-проектов для айпада. Для скролла контента используется вышеупомянутый iScroll.

Демо

jQuery Touchwipe Plugin

Плагин для обработки события “wipe”. Или “протирания” по-русски. Когда пальцем (ну или кому как удобнее) проводим по экрану, например, слева направо. Для нативных приложений iPhone это движение обычно вызывает кнопочки удаления элемента.

iToggle for jQuery

Плагин jQuery для имитации нативных чекбоксов айДевайсов.

jQuery Slider Егора Хмелева

Этот слайдер отличается от прочих тем, что поддерживает работу на айДевайсах.

[offtop] Егор сейчас в команде, работающей над замечательным проектом Букмейт (у меня еще есть пара инвайтов, могу выслать).
Для чтения на айДевайсах там имеется неплохое веб-приложение... хотя его можно и значительно улучшить.

Инструменты для рисования интерфейсов, вайрфреймов и прототипирования

Для начала мне нравится интерфейс набросать на бумаге. За бугром есть нету проблемы приобрести блокнот для этой цели. И найти их нету проблемы.

Если вы производите такие блокноты (или знаете где их достать), пишите в комментах, я обязательно добавлю в статью.

А пока для домашних нужд предлагаю использовать распечатки.

• для айФона: портрет, ландшафт
• для айПада

Для прототипирования онлайн могу предложить два приложения

Mobione

Читатель targa кинул ссылку на этот ресурс. Это виндуз-приложение, дающее необходимый инструментарий для создания дизайна и тестирования(!) приложений.

MockingBird

Кстати, обнаружил что 15 сентября они выходят из стадии Беты. Очень неплохой инструмент.

iPhoneMockup

Наброска интерфейса для айфона.

Вдохновение

Парк приложений для айДевайсов постоянно растет. И очень часто можно найти какое-то интересное решение в интерфейсе. Все приложения не пересмотришь, но интересные идеи можно найти на Эмбере. Конкретно по айПаду здесь.

Ну а несомненно лучший способ вдохновиться - это получить приз от Временно ;)