Используйте стандарты

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

Механизм WebKit, совместно использованный Safari на рабочем столе и Safari на iOS, поддерживает все последние современные веб-стандарты, включая:

• HTML5

• XHTML 1.1

• CSS3

• (JavaScript) ECMAScript 3

• Уровень 2 DOM

• Технологии AJAX, включая XMLHttpRequest

Сеть всегда развивается, и как она делает, также - WebKit и Safari. Вы захотите информировать о развивающихся стандартах, происходящих от организаций по стандартизации Web Hypertext Application Technology Working Group (WHATWG) и Консорциума World Wide Web (W3C). WHATWG и веб-сайты W3C являются хорошим местом, чтобы начать узнавать больше об этих стандартах и предстоящем HTML5:

• www.whatwg.org

• www.w3.org

Обратитесь к справочным документам Safari, таким как Safari Ссылка HTML и Safari Ссылка CSS, для доступности функций на определенных платформах.

Следуйте за хорошими методами веб-дизайна

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

• Добавьте a DOCTYPE объявление к Вашим файлам HTML.

  Снабдите свои файлы HTML предисловием с a DOCTYPE объявление, говорящее браузеры который спецификация проанализировать Вашу веб-страницу против. Посмотрите Основы HTML для того, как сделать это.

• Разделите свой HTML, CSS и JavaScript в различные файлы.

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

• Используйте хорошо структурированный HTML.

  Вы увеличиваете межплатформенную совместимость браузера путем выполнения файлов HTML через блок проверки допустимости. Необходимо решить типичные проблемы, такие как без вести пропавшие кавычек, пропускать близко тегирует, неправильное вложение, неправильный случай и уродливый doctype. Посмотрите http://validator.w3.org или используйте блок проверки допустимости, предоставленный Вашими инструментами веб-разработки.

• Будьте независимым браузером.

  Избегайте использования строки агента пользователя для проверки, какой браузер в настоящее время работает. Вместо этого считайте Объектное Обнаружение, чтобы изучить, как определить, читают ли поддержка браузера определенный объект, свойство или метод, и Обнаружение WebKit с JavaScript, чтобы изучить, как обнаружить определенные версии WebKit. Также используйте стандарт W3C способ получить доступ к объектам страницы — т.е. используйте getElementByID(“elementName”). Только как последнее прибежище используйте строку агента пользователя, как описано в Использовании Строки агента пользователя Safari для обнаружения Safari на iOS.

Считайте Основы HTML и Основы CSS для того, как записать структурированный HTML и добавить CSS к существующему HTML.

Используйте средства защиты

Safari на всех платформах использует ту же реализацию SSL для обеспечения сквозной безопасности. То же шифрование, предотвращающее слушание на проводе, так же безопасно, когда используется в беспроводной ситуации, ли через Wi-Fi, 3G или EDGE. В частности, поддержки Safari:

• SSL 2, SSL 3 и TLS со многими популярными наборами шифров

• Ключи RSA до 4 096

• HTTPS

Избегите Framesets

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

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

Поскольку нет никаких полос прокрутки на встроенных рамках, это не оптимальный пользовательский опыт для просмотра веб-контента на iOS, поэтому избегайте использования framesets. Вместо этого используйте столбцы, как описано в Столбцах Использования и Блоках.

Используйте столбцы и блоки

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

Текстовые блоки, охватывающие полную ширину веб-страницы, трудно считать на iOS как показано слева на рисунке 1-2. Столбцы не только разбивают веб-страницу, упрощая читать, как показано справа на рисунке 1-2, но позволять пользователю легко объектам двойного касания на странице.

Когда пользовательские двойные касания веб-страница, Safari на iOS смотрит на элемент, дважды коснувшийся и находящий самый близкий блок (как идентифицировано элементами как <div>, <ol>, <ul>, и <table>) или элемент изображения. Если найденный элемент является блоком, Safari на iOS масштабирует содержание для адаптации экрану width и затем центрирует его. Если это - изображение, Safari на изменениях масштаба iOS для адаптации изображению и затем центрирует его. Если блок или изображение уже увеличены, Safari на iOS уменьшает масштаб.

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

Знайте Пределы Ресурса iOS

Ваша веб-страница, выполняющая хорошо на рабочем столе, не является никакой гарантией, что это выполнит хорошо на iOS. Следует иметь в виду, что iOS использует EDGE (более низкая пропускная способность, более высокая задержка), 3G (более высокая пропускная способность, более высокая задержка), и Wi-Fi (более высокая пропускная способность, более низкая задержка) для соединения с Интернетом. Поэтому необходимо минимизировать размер веб-страницы. Включая неиспользованные или ненужные изображения, CSS и JavaScript в Ваших веб-страницах оказывает негативное влияние на производительность Вашего сайта на iOS.

Из-за памяти, доступной на iOS, существуют пределы на числе ресурсов, которые это может обработать:

• Максимальный размер для декодируемого GIF, PNG и изображений TIFF составляет 3 мегапикселя для устройств с RAM на меньше чем 256 МБ и 5 мегапикселей для устройств с большим или равным, чем RAM на 256 МБ.

  Т.е. гарантируйте это width * height ≤ 3 * 1024 * 1024 для устройств с RAM на меньше чем 256 МБ. Обратите внимание на то, что декодируемый размер намного больше, чем закодированный размер изображения.

• Максимальный декодируемый размер изображения для JPEG составляет 32 мегапикселя с помощью подвыборки.

  Изображения JPEG могут составить до 32 мегапикселей вследствие подвыборки, позволяющей изображениям JPEG декодировать к размеру, имеющему одну шестнадцатую число пикселей. Изображения JPEG, больше, чем 2 мегапикселя, подвыбираются — т.е. декодируются к сокращенному размеру. Подвыборка JPEG позволяет пользователю просматривать изображения от последних цифровых фотоаппаратов.

• Максимальный размер для элемента холста составляет 3 мегапикселя для устройств с RAM на меньше чем 256 МБ и 5 мегапикселей для устройств с большим или равным, чем RAM на 256 МБ.

  Высота и ширина объекта холста составляют 150 x 300 пикселей если не указанный.

• Время выполнения JavaScript ограничивается 10 секундами для каждой точки входа верхнего уровня.

  Если Ваш сценарий выполняется больше 10 секунд, Safari на iOS прекращает выполнять сценарий в случайном месте в Вашем коде, таким образом, могут закончиться непреднамеренные последствия.

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

  Посмотрите Safari веб-инспектор Гуид для того, как отладить JavaScript на iOS.

• Максимальное количество документов, которые могут быть открыты сразу, восемь на iPhone и девять на iPad.

Также необходимо измерить изображения соответственно. Не полагайтесь на масштабирование браузера. Например, не помещайте 100 x 100 изображений в 10 x 10 <img> элемент. Мозаика маленькие фоновые изображения; не используйте большие фоновые изображения.

Используйте избранный элемент

При использовании выбрать элемента HTML в веб-странице iOS выводит на экран пользовательское избранное управление, оптимизированное для выбора элементов в списке с помощью пальца в качестве устройства ввода данных. На iOS пользователь может щелкнуть для прокрутки списка и касания для выбора элемента из списка. Рисунок 1-3 сравнивает избранный элемент на рабочем столе с избранным элементом на iOS.

Используйте поддерживаемый Windows JavaScript и диалоговые окна

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

Можно открыть новое окно в JavaScript путем вызова window.open(). Помните, что максимальное количество документов — следовательно, максимальное количество открытых окон — восемь на iOS.

Поддерживаемые диалоговые методы JavaScript включают alert, confirm, print, и prompt. При использовании этих методов Safari на iOS выводит на экран привлекательное диалоговое окно, не затеняющее веб-страницу, как показано на рисунке 1-4.

Используйте Поддерживаемые Типы контента и Функции iOS

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

На iPhone и iPod touch, видео и аудио воспроизводится в полноэкранном режиме только. Когда пользователь изменяет ориентацию, как показано на рисунке 1-5, видео автоматически расширяется до размера экрана и вращается. Средства управления автоматически скрываются, когда они не используются. На iPad, видео и аудио играется или встроен в веб-странице или в полноэкранном режиме. Считайте Видео Создания для того, как экспортировать видео для iOS.

Документы в формате PDF просты просмотреть Safari использования на iOS и еще проще пролистать как показано на рисунке 1-6. Документы в формате PDF, соединенные от веб-контента, открыты автоматически. Индикатор страницы отслеживает то, где пользователь находится в документе. И так же, как с видео, пользователь может повернуть iOS для просмотра PDF в альбомной ориентации.

Safari на iOS предварительно просматривает другие типы контента как MS Office (Word, Excel и PowerPoint), iWork (Страницы, Числа и Представление ведущих идей), и документы RTF. Если другое приложение регистрируется для типа контента, что Safari на предварительных просмотрах iOS, то то приложение используется для открытия документа. Например, на iPad, Страницы могут использоваться для открытия Word и документов Pages, предварительно просматривающихся в Safari на iOS. Если другое приложение регистрируется для типа контента, который Safari на iOS не поддерживает исходно или предварительный просмотр, то Safari на iOS позволяет документу быть загруженным и открыл использование то приложение.

Когда пользователь касается определенных типов ссылок, Safari на iOS может запустить исходное приложение для обработки ссылки — например, Почта для создания электронного письма, Карт, чтобы заставить направления и YouTube смотреть видео. Если пользователь касается ссылки телефонного номера на телефонном устройстве, диалоговое окно кажется спрашивающим, хочет ли пользователь набрать тот номер. На рабочем столе большинство этих ссылок перенаправляет к соответствующему веб-сайту. Считайте Apple Ссылка Схемы URL для узнавания больше об использовании этих типов ссылок в веб-контенте.

Используйте холст для векторной графики и анимации

Можно использовать тот же объект холста, используемый виджетами Инструментальной панели для реализации сложных пользовательских интерфейсов для веб-приложений. Объект холста был представлен в Safari 2.0, принят другими механизмами браузера и является частью спецификации WHATWG. Считайте WebKit Темы Программирования DOM для узнавания больше об использовании объекта холста.

Используйте аудио и видео элементы HTML5

Можно использовать HTML5 audio и video элементы для добавления аудио и видео к веб-страницам. На устройствах меньшего размера как iPhone и касание iPad, игры фильма в полноэкранном режиме только и автоматическое воспроизведение отключены так, пользовательское действие требуется, чтобы инициировать воспроизведение. На iPad видео играет встроенный в веб-странице. Когда видео играется встроенное, можно создать пользовательские элементы управления и получить медиа-события — например, пауза и играть события — для улучшения пользовательского опыта. Используйте HTMLMediaElement класс и его подклассы, описанные в Safari Дополнительная Ссылка DOM, чтобы сделать это. Считайте Аудио Safari HTML5 и Видео Руководство для большей всесторонней информации о audio и video элементы. Считайте Видео Создания для того, как создать медиа-файлы, совместимые с Safari.

Используйте Поддерживаемый iOS Богатые Носители Типы MIME

Таблица 1-1 перечисляет богатые носители типы MIME, поддерживаемые Safari на iOS. Файлы с этими типами MIME и расширениями файла могут играться на iOS.

Не делайте Use Unsupported iOS Technologies

В целом Safari на iOS не поддерживает сторонних плагинов или функций, требующих доступа к файловой системе. Следующие веб-технологии не поддерживаются на iOS:

• Модальные диалоговые окна

  Не использовать window.showModalDialog() в JavaScript. Считайте Использование Поддерживаемый Windows JavaScript и Диалоговые окна для списка поддерживаемых диалоговых окон.

• События mouseOver

  Пользователь не может «наведение мыши» неактивируемый по щелчку элемент на iOS. Элемент должен быть активируемым по щелчку для a mouseover событие для появления, как описано в Событиях С одним пальцем.

• Стили парения

  С тех пор a mouseover событие отправляется только прежде a mousedown событие, стили парения выведены на экран, только если пользователь касается и содержит активируемый по щелчку элемент со стилем парения. Считайте События Обработки для всех событий, сгенерированных жестами на iOS.

• Подсказки

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

• Апплеты Java

• Flash

  Не переводите в рабочее состояние предупреждения JavaScript, просящие, чтобы пользователи загрузили Flash.

• QuickTime VR (QTVR) фильмы

• Сменная установка

• Пользовательские x.509 сертификаты

• WML

  Safari на iOS не является миниатюрным веб-браузером — это - полный веб-браузер, представляющий страницы, как разработано — поэтому, нет никакой потребности в Safari на iOS для поддержки Языка разметки для беспроводной связи (WML). Также это действительно поддерживает мобильные типы документов профиля XHTML и сайты в .mobi домены.

  Мобильный тип документа XHTML:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

• Загрузки файла и загрузки

  Safari на iOS поддерживает загрузку файла — т.е. <input type=“file”> элементы — на iOS 6 и позже.

  Не предлагайте пользователю загружать плагины как Flash на iOS. Посмотрите Используя Строку агента пользователя Safari для того, как обнаружить Safari на iOS.

По умолчанию Safari на iOS блокирует всплывающие окна. Однако это - предпочтение, которое может изменить пользователь. Для изменения настроек Safari коснитесь Настроек, сопровождаемых Safari. Блок Раскрывается, установка появляется в разделе Security.