Статьи

Проектирование и разработка для iPhone с нуля

В этом уроке мы будем разрабатывать веб-сайт для мобильного браузера Safari (который можно найти на iPhone и iPod Touch). Мы начнем с нуля в Photoshop и постепенно перейдем к готовому продукту с анимированным слайдером изображений jQuery.


  • Требования : настоятельно рекомендуется iPhone или iPod touch. Пользователи Mac могут также загрузить симулятор iPhone.
  • Версия для iPhone : 3.1.2

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


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

  • Имейте размер шрифта, который читается даже на маленьком экране устройства.
  • Используйте ссылки, стилизованные таким образом, чтобы пользователь мог сказать, что они кликабельны без типичной визуальной подсказки «указатель-курсор».
  • Держите содержание коротким. Мы должны предоставлять им только ту информацию, которая им потребуется при посещении вашего сайта с помощью мобильного браузера.
  • Держите общий размер загрузки небольшим. В конце концов, они, скорее всего, загружают ваш сайт через телефонную связь.

Если у вас Mac, вы можете скачать iPhone SDK с Developer.Apple.com . Зарегистрируйте бесплатную учетную запись и загрузите последнюю версию iPhone SDK с симулятором iPhone. Настоящий iPhone или ipod Touch всегда будет лучшим решением, но симулятор хорошо работает в целях разработки.


Сначала загрузите эту цементную текстуру с Flickr . Поместите изображение в документ Photoshop размером 320px (ширина) на 480px (высота). Измените цвет фона на # 1D1D1D. Измените стиль слоя на текстуре на «Умножение» и добавьте градиентную маску от белого к черному.


Щелкните правой кнопкой мыши на слое и сгладьте изображение. Скопируйте и вставьте в новое окно, чтобы мы могли превратить его в повторяющееся изображение. Перейдите в Filter> Other> Offset. Установите значение по горизонтали +162. Используйте лечебный инструмент, чтобы очистить проблемную область. Сохраните изображение в формате jpg, установите качество на 60%.


Откройте другой документ Photoshop и установите его на 195px (ширина) на 75px (высота). Создайте два слоя, каждый с линией, нарисованной инструментом line. Разделите линии одним пикселем. Верхняя линия должна быть белой, нижняя темно-серой. Экспортируйте изображение, как мы делали на предыдущем шаге. Оба изображения должны быть сохранены в папке с именем «images»



Теперь пришло время кодировать домашнюю страницу. Мы собираемся добавить основной код и затем стилизовать его на следующем шаге. Сохраните это как index.html. Следующий код даст нам базовый HTML-код домашней страницы и ссылку на таблицу стилей, которую мы создадим.

Давайте добавим некоторый стиль, создав новый файл с именем styles.css. Следующий код даст нам стиль для HTML-кода домашней страницы.


Сохраните изображение пожарной машины в папку «imageslider» внутри папки «images». Сохраните изображение как img1.jpg. Это будет изображение, отображаемое в слайдере изображений.


Скачайте Easy Slider 1.7 jQuery Slider и скопируйте папку «js» в ту же папку, что и наш файл index.html. Скопируйте следующий код в теги head в файле index.html.

Теперь у вас будет функционирующая домашняя страница.


Чтобы удалить адресную строку, замените тег body следующим текстом:

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


Скопируйте страницу index.html, чтобы создать страницу about. Удалите код, относящийся к ползунку jQuery. Добавьте подписку под кнопкой «Читать далее», чтобы создать «боковую панель».

Сохраните следующее изображение в папке изображений. Назовите это cat.jpg.


Затем пришло время добавить стиль к элементам внутри боковой панели. Нам нужно будет сделать это с некоторыми CSS. Добавьте следующее в ваш файл styles.css.



Скопируйте страницу about и назовите ее contact.html. Добавьте следующий код в заголовок вашего HTML. Это код для расширения карты Google, используя их API. Вам понадобится ключ API Карт Google, если вы собираетесь использовать его на действующем сервере. Вы можете использовать онлайн-сервис для создания кода, если вам неудобно писать его самостоятельно.

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


Не стесняйтесь обновлять свое меню, чтобы оно соответствовало каждой странице, перемещая «выбранный» класс в соответствующий элемент списка.

Для дальнейших исследований не стесняйтесь заглянуть в статью Engage Interactive, а также в учебник по Nettuts + .