Разработка web-страниц под iPhone: 12 советов для начинающих.

В этой статье приведены некоторые советы и приёмы разработки web-страниц для iPhone. Для начала вы можете попрактиковаться на эмуляторе iPhone, если ещё не готовы к большой покупке.

1. Документация и эмулятор iPhone

"Документация отсутствует" - заявил Peter-Paul Koch, ознакомившись с Safari под iPhone, но с тех пор ситуация изменилась. Сейчас Apple распространяет информацию для разработки под iPhone как часть документации Safari.
iPhone SDK (software development kit), предназначенный только для Mac, также содержит эмулятор iPhone. Он очень удобен, если у вас уже есть iPhone и абсолютно необходим, если вы только собираетесь стать его обладателем. Чтобы получить доступ, вам надо зарегистрироваться в качестве iPhone-разработчика и установить iPhone SDK. После установки вы найдёте эмулятор в папке /Developer/Platforms/iPhoneSimulator.platform/Developer/Applications.

2. CSS для маленьких экранов

Наиболее очевидное различие между iPhone и PC с Маком в том, что iPhone имеет экран намного меньшего размера. Если у вас уже имеется сайт, работающий в браузерах и программах чтения с экрана, надо лишь добавить дополнительную таблицу стилей, которая будет использоваться только для iPhone. Вот рабочий код:

<!--[if !IE]>-->
<link
  rel="stylesheet"
  href="small-screen.css"
  type="text/css"
  media="only screen and (max-device-width: 480px)"
/>
<!--<![endif]-->

Тэг link использует media-запрос, чтобы ограничиться устройствами с максимальной шириной экрана в 480 пикселов - это ширина экрана iPhone в альбомной ориентации. Условные комментарии необходимы для IE версий 5.5 и ниже, так как в них нет поддержки media-запросов. Поэтому они попытаются загрузить таблицу стилей, предназначенную для iPhone.

Давайте рассмотрим пример.

В Примере 1 мы видим страницу, показывающую красный блок посетителям, просматривающим страницу через iPhone и синий всем остальным. Таблица стилей common.css предназначена для всех браузеров и включает описание синего блока. Другая таблица small-screen.css предназначена для мобильных устройств и содержит описание красного блока. Если вы откроете этот пример через iPhone, вы увидите красный блок, а если через браузер компьютера, то синий.

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

@media only screen and (max-device-width: 480px) {
 #test-block {
   background: red;
 }
}

Пример 2 демонстрирует использование встроенных стилей. В таблице oneforall.css вы увидите определение красного фона в блоке @media.

3. Meta viewport

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

К счастью, проблему легко решить с помощью специального атрибута viewport тега meta:

<meta name="viewport" content="width=device-width" />

Этот атрибут сообщает браузеру, что в качестве ширины окна просмотра надо использовать ширину экрана, а не 980 пикселей, заданных по умолчанию.

Можете почувствовать разницу на следующих двух примерах.

1. Пример 3 содержит простой параграф текста без указания атрибута viewport в теге meta. Текст практически нечитаем.
2. В примере 4 атрибут viewport указан. Теперь, поскольку ширина ограничена 320 пикселами, текст стало намного легче прочесть.

 

Текст будет крошечным, если не указать атрибут viewport.

 

Этот текст гораздо легче прочесть.
 

В качестве альтернативы вы можете присвоить параметру device-width любое число. Скажем, ваш блог имеет фиксированную ширину в 750 пикселей и поэтому отлично смотрится в разрешении 800х600.

Пример 5 демонстрирует урезанную версию подобной разметки: если вы откроете его на iPhone, то вы увидите белое поле, заполняющее оставшиеся из 980 пикселей.

Чтобы избавиться от этого лишнего поля, вы можете использовать атрибут viewport и установить ширину в 780px:

<meta name="viewport" content="width=780" />

Пример 6 показывает исправленную разметку с указанным атрибутом viewport.
Атрибут viewport также может содержать множественные значения, разделённые запятой, такие как initial-scale - коэффициент масштабирования, в котором пользователь изначально видит вашу страницу, или указание того, является ли функция масштабирования доступной пользователю. Вот обычный набор значений для веб-приложений:

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

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

4. Альбомная и портретная ориентация

Ваши страницы могут просматриваться в двух режимах: портретном и альбомном. Для вашего приложения может быть полезным уметь реагировать на изменение текущего режима.

Используя JavaScript вы можете получить доступ к свойству window.orientation, принимающему одно из следующих значений:

• 0 - нормальная портретная ориентация (кнопка home находится внизу).
• -90 - альбомная при повороте по часовой стрелке (кнопка home слева).
• 90 - альбомная при повороте против часовой стрелки (кнопка home справа).
• 180 - пока не поддерживается, в будущем — перевёрнутая портретная ориентация с кнопкой home вверху.

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

Этот пример просто выводит сообщение при изменении текущей ориентации, отображая значение свойства window.orientation:

window.onorientationchange = function() {
  alert(window.orientation); 
}

Вы можете увидеть, как это работает в примере 7: поворачивайте телефон, чтобы увидеть сообщения.

В эмуляторе iPhone вы найдёте функцию поворота в меню Hardware.

 IPhone в трёх видах ориентации. Нажмите для просмотра изображения большего размера.

5. Стили для различных режимов

Давайте применим только что рассмотренное событие более практично. Иногда может возникнуть необходимость форматирования содержимого с помощью таблиц стилей в зависимости от текущей ориентации. Это потребует выполнения трёх простых шагов:

1. В разметке добавить элементу body имя класса, (portrait и landscape подойдут лучше всего).
2. В таблице стилей определить различные стили для body.portrait, body.landscape и, если понадобится, для их потомков.
3. Используя JavaScript, изменять класс элемента body при изменении текущей ориентации.

Итак, вначале добавим имя класса по умолчанию:

<body class="portrait">

Затем можно определить стили:

body.portrait p { 
   color: red; 
} 
 
body.landscape p { 
   color: blue; 
}

И, в конце концов, JavaScript. Нам понадобится:

1. Обработчик события load, чтобы задать начальное имя класса.
2. Обработчик событияorientationchange.
3. Функция, изменяющая имя класса по событию orientationchange.

Зададим обработчики для перечисленных событий:

window.addEventListener('load', setOrientation, false); 
window.addEventListener('orientationchange', setOrientation, false);

А вот функция setOrientation, которая изменяет имя класса для элемента body:

function setOrientation() { 
  var orient = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait'; 
  var cl = document.body.className; 
  cl = cl.replace(/portrait|landscape/, orient); 
  document.body.className = cl; 
}

Пример 8 демонстрирует стили, зависящие от ориентации.

 

Текст меняет цвет при повороте устройства (нажмите для просмотра изображения большего размера).

6. Скрытие тулбаров

Вы наверное заметили, что после загрузки страницы на iPhone, видна строка ввода URL, которая исчезает при прокрутке.

 

Отображение тулбаров включено.

Если вы желаете, чтобы ваше веб-приложение выглядело как нативное, то  лучше убрать тулбар после загрузки страницы. Для этого просто прокрутим страницу на один пиксел вниз, используя window.scrollTo:

window.addEventListener('load', function(){
setTimeout(scrollTo, 0, 0, 1);
}, false);

Пример 9 показывает предложенный способ в действии.

 

Тулбары выключены.

Что делать, если ваша страница слишком короткая и прокрутка для неё недоступна? В этом случае нам понадобится дополнительный тег meta. Чтобы сделать страницу прокручиваемой, установим размеры области просмотра с помощью meta:

<meta name="viewport" content="height=device-height,width=device-width" />

7. Скруглённые углы

В вашем приложении должны быть скруглённые углы, не так ли? Вы можете применять свои излюбленные приёмы, работающие в большинстве браузеров, или, если хотите ограничиться только Safari, можете использовать расширение -webkit-border-radius. Так как для Firefox есть аналогичное свойство -moz-border-radius, вы получите отличный скруглённый блок и в Firefox, и в Safari, который превратится в отличный прямоугольный блок в IE и Opera:

.box { 
   -webkit-border-radius: 5px; 
   -moz-border-radius: 5px; 
   background: #ddd; 
   border: 1px solid #aaa; 
}

Пример 10 демонстрирует скруглённые углы на элементе div.

 

Скруглённые углы.

8. Обработка касаний

Конечно, вы управляете iPhone пальцами, а не мышью, и вместо кликов - прикасаетесь к экрану. Более того, вы можете задействовать несколько пальцев одновременно. В iPhone события мыши заменены событиями прикосновений. Перечислим их:

• touchstart
• touchend
• touchmove
• touchcancel (система отменила касание)

Обработчик этих событий в качестве параметра принимает объект event. Объект event имеет несколько важных свойств, таких как:

• touches — набор объектов touch, представляющих касания, для каждого пальца, коснувшегося экрана. Объекты touch в свою очередь имеют свойства pageX и pageY, содержащие координаты прикосновения в пределах страницы.
• targetTouches работает аналогично, но, в отличие от touches регистрирует касания только для выбранного элемента, а не для всей страницы.

Следующий пример является простой реализацией drag-and-drop. Будем перемещать блок по пустой странице. Всё, что вам надо сделать, это описать обработчик события touchmove и обновлять положение блока по мере движения пальца, например так:

window.addEventListener('load', function() { 
 
 var b = document.getElementById('box'), 
     xbox = b.offsetWidth  / 2, // half the box width 
     ybox = b.offsetHeight / 2, // half the box height 
     bstyle = b.style; // cached access to the style object 
 
 b.addEventListener('touchmove', function(event) { 
   event.preventDefault(); // the default behaviour is scrolling 
   bstyle.left =  event.targetTouches[0].pageX - xbox + 'px'; 
   bstyle.top  =  event.targetTouches[0].pageY - ybox + 'px'; 
 }, false); 
 
}, false);

Обработчик события touchmove первым делом отменяет стандартные действия при движении пальца по экрану, иначе Safari прокрутил бы страницу. Список event.targetTouches содержит данные для каждого пальца, прикоснувшегося к элементу div. Мы не заботимся о мультитаче, поэтому используем event.targetTouches[0]. Далее, pageX предоставляет нам координату X прикосновения. Из этого значения мы вычитаем половину ширины блока, чтобы палец оставался посередине.
Весь этот код собран в примере 11.

9. Жесты

В iPhone жесты - это действия, выполняемые двумя пальцами: масштабирование (увеличение или уменьшение) и поворот. Мы уже знаем, что объекты touches и targetTouches содержат информацию о каждом пальце, прикоснувшемся к устройству. Используя вышеупомянутые события, можно обработать и жесты, такие как масштабирование и поворот. Но для этих целей есть более удобные события:

• gesturestart
• gestureend
• gesturechange

В следующем примере мы будем обрабатывать событие gesturechange, а затем масштабировать и вращать блок, используя специфичное для WebKit CSS-свойство webkitTransform.

Как обычно, обработчики событий принимают в качестве параметра объект event. Объект event имеет следующие свойства:

• event.scale - единица, если масштабирование не применялось, значение меньше 1 при уменьшении масштаба и больше единицы при увеличении.
• event.rotate - угол поворота в градусах.

Код очень похож на код для перемещения блока из предыдущего примера:

window.addEventListener('load', function() { 
 var b = document.getElementById('box'), 
     bstyle = b.style; 
 b.addEventListener('gesturechange', function(event) { 
   event.preventDefault(); 
   bstyle.webkitTransform = 'scale(' + event.scale + ') ' + 
                            'rotate('+ event.rotation + 'deg)'; 
 }, false); 
}, false);

Пример 12 показывает поворот и масштабирование блока в действии.
Если вы просматриваете этот пример в эмуляторе, зажмите клавишу Option: появятся две серые точки, представляющие два пальца, двигая мышью, вы можете перемещать точки в различных направлениях.

 

Масштабирование и поворот (нажмите для просмотра изображения большего размера).

10. Специальные ссылки

Было бы здорово, если при просмотре страницы, на которой указан телефонный номер, можно было просто нажать и позвонить, не выписывая его. Телефонные номера, конечно, становятся ссылками автоматически, если соответствуют формату. Но вам может быть нужно создать ссылку на телефонный номер вручную. В этом случае используйте префикс tel:, к примеру:

<a href="tel:12345678900">Позвони мне</a>

Если вам больше по душе SMS, используйте префикс sms:, чтобы запустить приложение iPhone для отправки текстовых сообщений.

<a href="sms:12345678900">Отправьте мне сообщение</a>

Некоторые ссылки могут выполнять другие специальные действия в iPhone, не требуя при этом указания префиксов:

• Ссылки на iTunes Store запускают iTunes. Вы можете получить ссылку на трек в iTunes Store с помощью iTunes: вначале найдите трек, затем щёлкните правой кнопкой на результате и выберите пункт «Copy iTunes Store URL». Либо используйте приложение iTunes Link Maker, которое создаёт необходимый HTML-код, включая небольшую графическую кнопку.
• Ссылка на Google Maps запускает приложение Maps.
• Ссылки на YouTube запустят приложение YouTube, а не сайт.
• Ссылки на адреса электронной почты запускают приложение Mail. 

 

11. Иконка для экрана Home

Будем надеяться, что посетителю настолько понравится ваш сайт, что он решит выделить ему кусочек места на экране Home. Когда пользователь добавляет вашу страницу на кран Home, то iPhone использует скриншот страницы в качестве иконки. Однако вы можете улучшить ситуацию, предоставив собственную иконку.

Для этого создайте PNG-файл размером 57x57 пикселов, назвав его apple-touch-icon.png, и положите в корневую папку вашего веб-сервера, так же как и фавиконку. iPhone автоматически добавит эффект глянца и скруглённые углы, нет необходимости рисовать их самому!

 

Слева — иконка Yahoo, справа — иконка на экране Home.

Вы также можете задать путь и имя иконки с помощью тега link. Это даст возможность указать другой веб-сервер, к примеру сеть доставки контента (CDN) для хранения иконки или ссылаться на один и тот же файл с разных сайтов. Чтобы задать расположение иконки, используйте следующий код:

<link rel="apple-touch-icon" href="http://www.example.com/my-filename.png" />

12. Отладка: просмотр кода и консоль

Как насчёт просмотра кода, самой полезной вещи для обучения и отладки? На iPhone, к сожалению, это невозможно. К счастью, в Safari на iPhone работают букмарклеты, и вы можете использовать их для восполнения функциональности. Как же это реализовать?
Итак, у вас есть доступ к коду страницы (точнее, сгенерированному коду) в JavaScript через document.documentElement.innerHTML. Для букмарклета вопрос только в том, где его отобразить, например, в новом окне. Хорошая новость заключается в том, что нет нужды упражняться в JavaScript на этот раз, ведь у вас есть готовое решение. iPhoneWebDev уже выпустили несколько бесплатных букмарклетов, предназначенных для iPhone. Выбрав нужные, просто синхронизируйте свои закладки с iPhone через iTunes.

Для отладки в iPhone есть консоль. Вы можете включить её в настройках Safari в приложении Settings, выбрав пункт Developer и отметив переключатель Debug Console. Она появится в Safari под строкой ввода URL и будет показывать все ошибки, которые могут возникнуть на странице, к тому же вы можете использовать объект console для вывода отладочных сообщений из JavaScript.

Например:

console.log('Что-нибудь'); 
console.error('Уупс'); 
console.warning('Будьте осторожны!');

Приступим к разработке!

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

Ключевые слова: разработка под iPhone, веб-приложения, нативные приложения, жесты, советы начинающим.