Главная > Руководства > Руководство: Учимся создавать веб-сайты для iPhone

Руководство: Учимся создавать веб-сайты для iPhone


23 октября 2009, 00:15. Разместил: Mysterious Master
Как и обещали, будем время от времени делиться обучениями. Школа The Engage Interactive, посвященная всему, что вы можете повстречать в сети Интернет, представляет: О том, как создать веб-сайт, ориентированный специально на iPhone.

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

- Настройка страницы

Как и любой другой веб-браузер, Safari требуется весь стандартный html-код в верней и нижней частях страницы, и по-прежнему не будет ничего плохого в том, чтобы добавить пару ключевиков, по которым Google сможет отслеживать содержимое вашего сайта. Вдобавок, существуют некоторые специальные мета-тэги iPhone, с помощью которых вы сможете управлять предоставлением содержимого. У меня есть пример того, как должен выглядеть код в пределах области "head".

<head>  
    <title>Engage Interactive</title>  
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">  
    <link rel="apple-touch-icon" href="images/template/engage.png"/>  
</head>  
<body onorientationchange="updateOrientation();">  
</body>

Если вы посмотрите на строки 3,4 и 6, то заметите, что вы никогда ранее не сталкивались с таким текстом.

Линия под номером 3 сообщает Safari о том, что область просмотра должна быть такого же размера, как и дисплей у iPhone. Обычно дисплей iPhone действует в роли окна, фоном которого как раз является веб-сайт. Настраиваем эту линию на то, чтобы она заставляла содержимое всегда растягиваться по размеру окна. Следующая часть данной строки указывает на масштаб страницы. Так как мы настраиваем нашу страницу на отображение в маленьком экране iPhone, нам не нужно, чтобы страница отображалась в увеличенном варианте.

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

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

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

- Планировка содержимого

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

<div id="page_wrapper">  
    <h1>Engage Interactive</h1>  
    <div id="content_left">  
       <p>You are now holding your phone to the left</p>  
    </div>  
    <div id="content_right">  
        <p>You are now holding your phone to the right</p>  
    </div>  
    <div id="content_normal">  
        <p>You are now holding your phone upright</p>  
    </div>  
    <div id="content_flipped">  
        <p>This doesn't work yet.</p>  
    </div>  
</div>

Для начала нам нужна оболочка, в которой будет все содержимое страницы. Это очень важно, так как javascript будет менять классы данной оболочки, что будет воздействовать на множество элементов внутри нее.

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

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

Этим областям будут выставлены параметры "display:none" и "display:block" дабы избежать возможной большей путаницы, нежели простые фоновые цвета/изображения и размеры. Оставьте это все для содержимого в пределах областей.

- На CSS

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

/*----------------------------- 
RESET STYLES
-----------------------------*/  
  
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6{  
    margin:0;  
    padding:0;  
    -webkit-text-size-adjust:none;  
    }  
body{  
    font-size: 10px;  
    }  
ul, li, ol, dl, dd, dt{  
    list-style:none;  
    padding:0;  
    margin:0;  
    }  
a{  
    text-decoration:none;  
    }

Самый важный момент здесь – это: "-webkit-text-size-adjust:none;" Эта линия препятствует тому, чтобы Safari изменял размер шрифта тогда, когда вы поворачиваете телефон. По стандарту – текст увеличивается, так как, при повороте телефона, веб-страница становится немного увеличенной. Но в данном случае, мы пристыковали страницу к размерам экрана, так что нам не требуется данная функция.

/*----------------------------- 
    BASIC PAGE STYLING
-----------------------------*/  
  
body{  
    background:#fff000;  
    font-family: Helvetica;  
    color:#999;  
    }  
p{  
    font-size:12px;  
    padding-bottom:8px;  
    }  
a{  
    color:#fff000;  
    text-decoration:none;  
    }  
  
/*-----------------------------
    HEADINGS
-----------------------------*/  
  
h1{  
    display:block;  
    width:112px;  
    height:41px;  
    background-image:url(images/logo.gif);  
    text-indent:-5000px;  
    }  
  
/*-----------------------------
    BASIC LAYOUT
-----------------------------*/  
  
#page_wrapper{  
    padding-top:20px;  
    background:#000 url(images/page_background.gif) repeat-x;  
    overflow:auto;  
    }

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

Используя параметр "overflow:auto" в "#page_wrapper" мы указывает на то, что ни один плавающий элемент не переполнит содержащий его div. Это лучшая альтернатива тэгу "
".

- Сложный CSS

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

/*----------------------------- 
    ORIENTATION CLEVERNESS
-----------------------------*/  
  
#content_left,  
#content_right,  
#content_normal,  
#content_flipped{  
    display:none;  
    }

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

.show_normal,  
.show_flipped{  
    width:320px;  
    }  
.show_left,  
.show_right{  
    width:480px;  
    }

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

.show_left #content_left,  
.show_right #content_right,  
.show_normal #content_normal,  
.show_flipped #content_flipped{  
    display:block;  
    }

И наконец, умный кусочек (на самом деле не такой уж и умный). Он просто отображает блоки, если у "#page_wrapper" указан правильный класс. Эти классы будут указываться посредством javascript. Можно было бы все это сделать посредством javascript, если бы я не делал сайт Engage с некоторыми трюками в нужных местах, где к классам нужно было прикрутить конкретные стили.

- Торжественная концовка: Определение ориентации (и еще один полезный трюк)

Вот это действительно умный кусочек! Но я должен признаться, не все это было написано мной, некоторые части были взяты с различных примеров в сети. Я привел небольшой список использованных ресурсов в самом конце статьи. Концепция, однако, целиком и полностью принадлежит Engage Interactive.

window.onload = function initialLoad(){  
    updateOrientation();  
}

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

function updateOrientation(){  
    var contentType = "show_";  
    switch(window.orientation){  
        case 0:  
        contentType += "normal";  
        break;  
  
        case -90:  
        contentType += "right";  
        break;  
  
        case 90:  
        contentType += "left";  
        break;  
  
        case 180:  
        contentType += "flipped";  
        break;  
    }  
document.getElementById("page_wrapper").setAttribute("class", contentType);  
}

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

* Линия 1 называет функцию, которая запускается каждый раз, как телефон поворачивают. Это именно то, что мы применили ранее в пределах тэга "body".
* Линия 2 устанавливает переменную "contentType" на стандартный "show_"
* Последующие линии проверяют ориентацию до тех пор, пока не будет найден подходящий вариант.
* И наконец, javascript обнаруживает "div page_wrapper" и устанавливает класс в значение "contentType". Отсюда берутся CSS и стиль соответствующие странице.

Ловко, не правда ли?

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

window.addEventListener("load", function() { setTimeout(loaded, 100) }, false);  
  
function loaded() {  
    document.getElementById("page_wrapper").style.visibility = "visible";  
    window.scrollTo(0, 1); // pan to the bottom, hides the location bar  
}

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

- Исходники

Для того, чтобы посмотреть законченный вариант, проследуйте www.engageinteractive.co.uk/tutorials/iphone/, используя iPhone. Очевидно, что сайт не откроется на компьютере, но вы сможете просмотреть весь код.

Нажмите правой кнопкой и сохраните следующий файл:

* Все сразу в архиве: source.zip - source.zip [6,11 Kb] (cкачиваний: 124)

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

- Вещи, которые стоит запомнить

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

* Все iPhone одинаковы. Если оно заработает на одном, то будет работать и на остальных. Как прекрасно то, что не нужно подстраиваться под разные вещи!
* Вы можете точно приравнять ваш сайт по ширине и высоте.
* Не беспокойтесь и используйте изображения в случае повышения удобства использования (правда, SEO причины все еще принимаются). iPhone не старается угодить людям, которые привыкли использовать программы для чтения. Не отходя от темы: нет ни единого способа увеличить размер текста, так что не стесняйтесь использовать пиксельные измерения, вместо em или процентов.
* Здесь нет функции ":hover"! В iPhone есть только "on" или "off". Ваш палец является курсором мыши, и перемещение его производится именно так. Так что, функция "hover" по сути и не требуется в CSS.
* В iPhone ограниченные возможности памяти и обработки процессов. Независимо от скорости интернет-соединения, большие изображения или сложные элементы javascript могут замедлить работу телефона. Иногда, он даже может повиснуть.

- Полезные источники

Apple любезно предоставили всю нужную информацию для людей, которой они могут спокойно пользоваться, когда они начинают грузить веб-приложения для iPhone. Я отобрал наиболее важные страницы, спрятанные под многочисленными слоями полезной информации и советов (но на них вам потребуется регистрация):

* Страницы разработчиков iPhone
* Советы от Apple
* Метрики экрана iPhone
* Настройка окна просмотра

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

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

- И да, как я мог забыть!

Данный небольшой скрипт будет определять iPhone или iPod Touch и переместит вас на любую нужную вам страницу.

if ((navigator.userAgent.indexOf('iPhone') != -1) ||  
(navigator.userAgent.indexOf('iPod') != -1)) {  
document.location = "http://www.engageinteractive.co.uk/iphone/";  
}


Автор статьи © некто Will
Русский перевод © CoolWebmasters.Com 2009
Вернуться назад