Оригинал статьиВы знаете, что Apple продает iPhone и что это хит продаж либо сидите в пещере и прячетесь вместе с Усамой бен Ладеном. Apple медленно, но верно движется к своей цели – продать десять миллионов мобильных Интернет-устройств до конца 2008 года. Помимо того, что iPhone – отличный телефонный аппарат, он также содержит в себе новый браузер Safary. Эта штука рекламируется как «самый продвинутый браузер для карманных устройств» и с моей точки зрения это соответствует действительности.

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

(отметим – в статье я ссылаюсь на новый браузер Safary чтобы не спутать его с настольными собратьями)

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

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

Время заканчивать начатое

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

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

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

Совместимость

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

Если вы используете стандарты веб для разработки вашего сайта, вы обнаружите, что Safary работает именно так, как вы хотите. Так как он использует тот же самый Web Kit, что и настольные версии Safary, он поддерживает – с некоторыми исключениями – последние версии HTML/XHTML, CSS, JavaScript и W3C DOM (первая часть статьи посвящена разработке приложений, дружественных iPhone; вторая часть касается трудностей и ограничений, включая и эти исключения). Большинство технологий AJAX, включая getElementById и XMLHttpRequest работает так же, как и их настольные собратья.

Однако до сих пор есть некоторые области, в которых Safary не работает так, как другие, либо вообще не работает.

Проблемы с подключаемыми программами

Упущение, вызывающее наибольшую досаду разработчиков – то, что не работает подключаемый Flash. Если ваш сайт использует флеш-технологии все iPhone посетители увидят голубой кирпичик со знаком вопроса внутри.

Если вы полагаетесь на флеш для навигации или отображения мультимедиа, у вас есть несколько вариантов действий, лишь один из которых действительно утомителен:

• ждать, быть может тщетно, когда Apple включит поддержку флеш. Возможно флеш был отключен из-за проблем с высоким энергопотреблением.
• Использовать определение браузера. Те из нас, кто помнят безмятежные дни конца 90-х, времена до введения стандартов, знают, что творить разные варианты сайтов для разных браузеров значит тратить больше, чем получать.
• Положиться на стандарты веба. Если дела говорят громче слов помните, что Apple заменила флеш с веб стандартами на своем корпоративном сайте.

Safary для каждого

Разработчики на Маке и на Виндах могут использовать настольный Safary как прокси для веба при разработке под iPhone. По большей части, как Safary отображает содержимое, так и будет оно выглядеть на телефоне. Есть пара отличий и подводных камней, на которые я обращу внимание во второй статье.

Apple также имеет веб-сайт, посвященный разработке веб приложений для iPhone. Этот сайт – лучшее место для того, чтобы быть в курсе последних новостей; если я имею какую-то проблему с разработкой под iPhone, в первую очередь я обращаюсь к их «Пособию по Веб разработке».

IPhone хорошо работает с не-флешовым мультимедиа контентом – специальная версия встроенного QuickTime доступна с помощью обычных тегов <object> и <embed>. Мобильная Safary, однако, работает иначе, чем ее настольный аналог. Встроенные фильмы и звук только демонстрируют кнопку «play» которая открывает мультимедиа контент в отдельном окне, перекрывающем ваше содержимое. Помимо этого вы не имеете никакой возможности управлять воспроизведением с помощью JavaScript.

Несмотря на эти отличия Apple рекомендует вам добавлять изображения когда вы встраиваете в ваш сайт мультимедиа.

<embed xsrc=”poster.jpg” mce_src=”poster.jpg” xhref=”movie.mov” mce_href=”movie.mov” »
width=”456″ height=”123″ …>

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

Подстройка

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

По моему мнению, для этого вам необходимо иметь iPhone. Как уже отмечалось, вы можете использовать настольную Safary для предварительного просмотра содержимого, но то, о чем я собираюсь рассказать требует более тонкой настройки. Пока вы не держите в своей руке телефон вы не сможете точно сказать, имели ли эффект внесенные вами изменения. Напомните себе (или своему боссу), что IRS рассматривает iPhone как хорошее вложение денег.

iPhone следует известной концепции веб-разработки – окну просмотра. Если возникает проблема воспроизвести большую страницу на маленьком экране телефона, разработчики используют окно просмотра для выбора отображаемой части.

В принципе, окно просмотра похожа на лупу. Когда вы открываете страничку в Мобильном Safary, он показывает ее 980-пиксельный фрагмент (Apple выбрала такой размер для совместимости с наибольшим число сайтов. Увеличение лупы, иначе говоря, масштаб настроен таким образом, чтобы отразить 980-пиксельную область на 320-пиксельном экране iPhone.

Манипулируя пальцами вы управляете усилением лупы (изменяя масштаб ее изображения). Подобно этому двойное нажатие на элементе страницы, таком, как <div> изменит масштаб и окно просмотра будет оптимизировано для показа этого элемента.

Благодаря тому, что новый тег <meta> распознается iPhone, вы можете управлять поведением окна просмотра. Представьте себе сайт, чье <body> занимает ровно 808 пикселей в ширину. Определением тега <meta> вы можете передать Safary, насколько велико должно быть начальное окно просмотра

<meta name=”viewport” content=”width=808″ />

Это изменит число пикселей, которые должны быть выведены на экран с 980 до 808. Вроде бы не столь уж и велика разница, но если учесть, что у телефона ширина экрана всего 320 пикселей, то это очень заметно. В случае моего сайта это делает заголовки всех сообщений читаемыми с первого взгляда, без увеличения – весьма существенное достижение.

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

-webkit-text-size-adjust: none;

Либо вы можете использовать ems для определения координат. Размеры элементов, заданные таким способом будут увеличиваться вместе с текстом.

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

h1 {

-webkit-text-size-adjust: 200%;

}

Стилизация под iPhone

Прежде, чем стремиться к большей совместимости рассмотрим наше железо, как телефон, так и нас самих. Экран iPhone умещает 160 пикселей в каждый дюйм экрана и вы используете собственные пальцы для того, чтобы получить доступ к нему. Если вы положите палец на линейку, то увидите, что он занял пространство между половиной и четвертью дюйма. Это соответствует 40 – 80 пикселям экранного пространства.

Теперь глянем на нашу страничку. Сколько пикселей между кнопками наших меню? Если меньше 40, то ваш пользователь играет в русскую рулетку – его 40-80 пиксельный палец не сможет надежно выбрать 20-пиксельную ссылку.

Когда вы используете стили iPhone, то вам необходимо учитывать их доступность для пользователей мобильных устройств высокого разрешения. Мое правило для указания самых важных элементов: увеличение размера шрифта с 18 до 36 пикселей. Вы можете пожелать сфокусировать внимание на элементах диалога (таких, как <a> и <input>) или элементах навигации (таких, как заголовки разделов и отладочные заглушки).

Как же использовать элементы стиля, которые будут применяться только для iPhone? Используйте ключ media для тега <link>. Вот правило, рекомендованное Apple:

<link media=”only screen and (max-device-width: 480px)”
xhref=”iPhone.css” mce_href=”iPhone.css” type=”text/css” rel=”stylesheet” />

Остальные браузеры проигнорируют iPhone.css так как имеют ширину экрана больше, чем 480 пикселей.

Интеграция сайта с оставшейся частью мобильного мира iPhone

Если вы решили продолжать настройку вашего сайта под iPhone вам необходимо подумать, как мобильный Safary взаимодействует с прочими сервисами телефона. Очень легко устроить передачу данных с вашей странички на приложения Mail, Maps или Phone – все, что вам необходимо, это использовать специальные ссылки.

Связь с mailto: работает как обычно – открывается приложение iPhone Mail с использование нужных параметров. Вы можете определить HTML метку в теле странички, но я бы не советовал этого, так как не все почтовые программы корректно обрабатывают это. Например, ниже следующее будет прекрасно работать на iPhone

<a xhref=”mailto:zippy@example.com?subject=Sarcasm&body=I »
<b>love</b> %26lt;html%26gt; mail!”>Hi!</a>

и создавать сообщение

To: zippy@example.com
Subject: Sarcasm

I love <html> mail!

Однако большинство других почтовых клиентов будет создавать сообщения такого типа:

I <b>love</b> <html> mail!

Мобильный Safary также обращается к Google Maps иначе, чем другие браузеры. Он проверяет, начинается ли ссылка href с http://maps.google.com/maps и автоматически загружает оставшуюся часть в Maps вместо новой веб странички. Обычные ключи ?q=location и ?saddr=start&daddr=destination удерживаются в Maps. Отметим, что так как вы переключаетесь между приложениями, то пользователь должен нажать кнопку Home и иконку Safary чтобы вернуться из Maps обратно на страничку. Будьте благоразумны используя ссылки на карты чтобы не запутать пользователя – в большинстве случаев возможно ограничиться только предварительным просмотром на самой ссылке, дающим возможность определиться без загрузки полного приложения Maps.

Самые продвинутые ссылки

Сейчас о самой новой и интересной фишке в iPhone – звонке по ссылке.

Скажем, вы имеете такой формат hCard на вашей страничке контактов:

<div id=”hcard-Ernestine” class=”vcard”>
<span class=”fn”>Ernestine</span>
<div class=”tel”>555-1212</div>
</div>

По умолчанию iPhone переведет 555-1212 в используемую ссылку. Стиль ссылки зависит от стиля порождающего уровня (то есть не существует путей определения идентификатора или класса для автоматически генерируемых ссылок).

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

<a class=”call” xhref=”tel:555-1212″ mce_href=”tel:555-1212″ >Call Me</a>

Когда пользователь активизирует ссылку, начинается набор определенного номера. Но с этими ссылками нужно быть осторожным. Многие браузеры показывают здесь ошибку, так как не могут распознать конструкцию tel: protocol. Вы можете, вероятно, захотеть скрыть эти ссылки в вашем CSS

a.call {
display: none;
}

А затем использовать ваш CSS для iPhone, чтобы показать там следующее

a.call {
display: inline;
}

Идем дальше: дизайн для iPhone

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

Необходимо постоянно помнить одну очень важную вещь, касающуюся работы с Мобильным Safary – очень часто она работает в среде EDGE. Эта технология основана на сотовой телефонии и она гораздо медленнее стационарных сетей. Она также имеет большую задержку – ваши запросы дольше идут к серверу и то же самое происходит с ответами.

Ощущения очень похожи на те, что были в эпоху модемов на 56К. И точно также, как в те времена нужно иметь в виду размеры лежащих на вашем сервере:

• HTML – испотзовать веб-стандарты, чтобы сохранять минимальный размер страниц
• CSS – использовать средние ключи (media queries) для уверенности в том, что загружено и разобрано минимальное количество правил
• Мультимедиа – использовать кодировку QuickTime H.264 и обращать внимание на битрейт. Ссылки на фильмы дадут вам возможность использовать элементы разного размера в одном и том же HTML
• Изображения – использовать специальный CSS для iPhone чтобы загружать картинки с меньшим разрешением.
• JavaScript – будьте осторожны, включая большие структуры JavaScript – загрузка сотен килобайт для показа и скрытия <div> не есть хорошо.

Наконец запомните размеры экрана iPhone – 320 на 480 пикселей. Если ваш контент нормально располагается в этих рамках, он выглядит лучше и не требует от пользователя усилий по прокрутке. Плюс к этому контент, не распределенный между многими столбцами легче воспринимается пользователями iPhone.

Определение целей

Теперь поговорим о еще большем погружении в тему – создании части вашего сайта, целиком предназначенной для пользователей iPhone

Почему вам необходимо сделать это?

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

Настольный комп дает нам возможность одновременно делать множество вещей – ходить по Сети, работать с почтой, общаться в чате, воспроизводить мультимедиа и т.п. У нас достаточно места для того, чтобы распределять внимание между всеми этими приложениями.

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

Ваш вебсайт также может быть использован различными способами. Часть этих способов может быть неприменима для тех, кто находится в движении и это служит причиной разработки сайта специально предназначенного для iPhone. Если вы разработали приложение, основанное на транзакциях, например связанное с электронной коммерцией, ваш нынешний интерфейс может оказаться слишком громоздким на iPhone – и тогда есть прямой смысл сделать его легче для людей, которые, в конце концов принесут вам прямую прибыль, даже если это означает серьезную переделку вашего сайта или создание его версии, полностью ориентированной на iPhone. Другие типы сайтов, например блоги, ввиду их малой информационной плотности вряд ли потребуют специальной работы.

Итак, если вы решили полностью адаптировать ваш сайт под iPhone вам нужно иметь в виду следующее:

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

Эмуляция и структуры

Глянем на инструменты, которые могут быть использованы для эмуляции интерфейса iPhone. Если вы решили побеспокоиться о том, как ваш сайт работает на Мобильном Safary, то вам будет нужно то, что вы не найдете ни в одном из настольных браузеров. Мечты сбываются – вам неважно, как ваш дизайн смотрится в Internet Explorer.

• используйте -webkit-border-radius CSS для создания элементов со скругленными углами.
• Применяйте правило -webkit-border-image CSS для использования лучше воспринимаемых окаймляющих изображений.
• Используйте тег <canvas> для создания двигающихся изображений и графики.

Существуют также структуры JavaScript разработанные для того, чтобы облегчить работу под интерфейс iPhone. Одно из наиболее популярных и продвинутых – iUI от Joe Hewitt. Если вы пользуетесь iPhone вы знаете, как применить его примеры.

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

Я понимаю, насколько много информации дал в этой статье. Не сокрушайтесь – большинство из того, что я описал может делаться постепенно. Начните с установки тега <meta> с информацией для окна просмотра и затем экспериментируйте и проверяйте собственные идеи. На финише вы получите сайт гораздо более приспособленный для iPhone. Я и миллионы других посетителей будем вам благодарны!

Это сообщение создано Понедельник, Октябрь 22, 2007 в 16:07 в категории Переводы, Веб-разработка. Автор сообщения: Farit. Вы можете подписаться на комментарии к сообщению RSS 2.0 Комментарии закрыты.