Верстка под iPhone

Air display

Один монитор — хорошо,  а два — лучше. С помощью Wi-Fi, iPad становится еще одним монитором, расширяющим рабочее пространство любого пользователя. Это удобство в первую очередь касается о дизайнеров, иллюстраторов или художников, которым приходится увеличивать изображение, для того чтобы прорисовать ту или иную деталь.

Стоимость: 9,99$

Art authority

Как  попасть в музей, чтобы при этом не покупать билет и не стоять в очереди? Да еще, чтобы другие зрители не загораживали картину? Приложение Art Authority — интерактивный музей из 500 картин и скульптур всех времен и культур. Интерфейс приложения подражает настоящему музею: выставочные залы посвящены разным эпохам, а проход ко всем  экспонатам оформлен в виде витрины или загорожен лентой.

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

Стоимость: 9,99$

Artist hall

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

Сборники о жизни и творчестве Да Винчи, Мане, Ван Гога, Ботичелли, Пикассо, Дали и Рембрандта постоянно пополяется новыми картинами, а перечень художников — узнаваемыми именами. В этом приложении нет ничего нового для тех, кто регулярно бывает в музее, но для тех, кто путается в стилях и биографиях — это отличный способ с удовольствием и пользой провести 15 минут в подземке или очереди.

Стоимость альбомов: 2,99$

Dexigner

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

Однако карты не всех стран загружены в приложении и уж тем более адреса музеев, которые там находятся: популярные маршруты, что неудивительно, — в первую очередь англоязычные страны по всему миру (США, Великобритания, Канада, Австралия) и Западная Европа.

Стоимость: бесплатно

Flipboard

Альтернативный способ обычному чтению журналов и газет предлагает Flipboard, приложение, разработанное специально для iPad.  Более того, оно индивидуально для каждого пользователя: выбранные сайты журналов, твиттеры других людей, блоги или RSS-подписки оно превратит  в один полноценный журнал.

Кроме того, здесь уже есть предустановленная подборка ресурсов, остается лишь добавить свои. Удручает лишь то, что количество ресурсов ограничено — их можно добавить не больше 21, так что придется выбирать только самые любимые. Ближайшие аналог Flipboard — приложение Pulse.

Стоимость: бесплатно

Foliobook photo portfolio

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

Стоимость: 9,99$

Home interior ideas hd

Интерактивый каталог Home Interior Ideas — одна из немногих альтернатив комнатам, обставленным для съемок каталога IKEA, и журналам по интерьеру. Это приложение идельно подходит для поиска вдохновения в редизайне интерьера (наряду со специальными блогами).

Стоимость: 1,99$

Houzz interior design ideas

CNN прозвала это приложение «википедией внутреннего и внешнего пространств». Эксперты Houzz Interior Design Ideas комментируют все: от расстановки и выбора мебели до цвета стен и способов обыграть небольшое пространство, а их галерея постоянно обновляется новыми подборками известных оформителей.

Стоимость: бесплатно

‎html & html5 editor

Imockups

Приложение для верстки страниц будет полезно для профессиональных верстальщиков или дизайнеров. Оно позволяет создать изящный макет страницы, даже если под рукой нет компьютера. А если у пользователя нет особых требований к макету, то можно воспользоваться заранее предустановленными вариантами верстки.

Стоимость: 6,99$

Keynote

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

Плюс этой программы в том, что готовая презентация, на создание которой не приходится затрачивать много времени и усилий, выглядит не хуже сделанной на обычном компьютере: в готовом состоянии она синхронизируется с HD-телевизором или Power Point. А за отдельную цену можно купить приложение, которое позволяет управлять презентацией с помощью другого iPhone или iPad.

Стоимость: 9,99$

Masque

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

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

Стоимость: 3,99$. Приложение доступно и в бесплатной версии, но в ней отсутствуют некоторые возможности и визуальные эффекты, а время использования ограничено.

Moma

Приложение от самого главного музея современного искусства в Нью-Йорке, которое позволяет гулять по виртуальному музею, узнавать о новых выставках, вблизи рассмотреть шедевры и прочитать биографии их авторов, а также оживить виртуальную экскурсию любимыми треками из медиатеки iTunes.

Стоимость: бесплатно

Moodboard

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

На этом возможности приложения не заканчиваются: из любого памятного события Moodboard сделает коллаж  фотографий и надписей,  а пользователь  в результате получит доску-напоминание — memoboard. Главное, не запутаться в таком количестве функций: выбрать цветовую гамму, фотографии, сделать надписи.

Стоимость: 9,99$. Бесплатная версия  этого приложения Moodboard Lite вполне подойдет для начала, хотя и ограничена в использовании.

Palettes pro

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

Стоимость: 5, 99$

Pulse

Это приложение — удобный ридер RSS-подписок. В отличие от вышеупомянутого Flipboard, который обновляет контент только при наличии интернета, приложение Pulse может работать и в оффлайн. Новости и статьи, фотографии и видеоролики в одном месте, красиво оформленные и удобные для чтения и рассматривания — вместо тысячей  вкладок в браузере, среди которых несложно запутаться, особенно в iPad.

Стоимость: бесплатно

Room design

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

Стоит лишь указать размеры ремонтируемого пространства, материал, из которого изготовлен пол и расположение окон, и приложение составит 3D-план дома, который можно переделывать, перекрашивать, обустраивать новой мебелью или даже менять планировку. Но приложение, слабо говоря, не доработано: этот интерактивный ремонт можно делать только безошибочно, ни о чем не жалея, так как функция отмены действия отсутствует. Более того, пользователи не смогут изменить цвет пола — здесь придется включить фантазию.

Стоимость: 7,99$

The phillips collections

Приложения с собственными экспонатами — популярная тенденция среди музеев. Вот и Музей Современного Искусства в Вашингтоне (Phillips collection) последовал примеру коллег и выпустил свое приложение, которое позволяет пользователям прогуляться по всему музею и ознакомиться с наиболее знаменитыми произведениями искусства.

Стоимость: бесплатно

Верстка на ipad « блог веб-разработчика

Иконка сайта в home screen

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

Сохраним иконку 57 на 57 пикселей, в корне сайта с названием apple-touch-icon.png. Теперь по умолчанию iPhone будет использовать именно ее. Можно дать любое имя для иконки, но тогда нужно прописать следующий тег:

Как протестировать верстку под iphone?

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

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

Тестер верстки под iPhone : Тестер верстки под iPad :

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

Тестер верстки под Opera Mini :

Как сделать сайт более iphone-совместимым за 5 шагов

Масштабирование и ориентация сайта на iphone

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

Особенности style.css для верстки под iphone

1. Если сайт оптимизируется под iPhone, то макет сайта должен состоять из одной колонки, а элементы должны растягиваться на 100% ширины.2. Не желательно использовать макет многоколоночного сайта.3. Для оптимизированного сайта, линеаризуйте все блочные элементы.

4. Не нужно делать много элементов на странице. Для маловажных элементов дизайна пропишите свойство:

5. Шрифт текста можно немного увеличить. Либо использовать свойство -webkit-text-size-adjust , которое автоматически подгонит размер шрифта.

6. Не используйте свойство position: fixed; так как фиксированные элементы будут наезжать на нефиксированные.7. По возможности замените абсолютные значения на процентные.8. Картинки большого размера могут вылезти за края экрана, чтобы избежать этого используйте следующие правила:

Особенности сайтов под iphone

1. Изображения не должны быть слишком большими

Не более 2048 x 1536 px. для iPhone с оперативной памятью до 256 Мб.Не более 2592 х 1944 px. для iPhone с оперативной памятью больше 256 Мб.

2. Adobe Flash не поддерживается.3. Кэшируются файлы размером не более 25 Kb.4. Не поддерживается работа с файлами с помощью <input type=”file” />.5. Могут возникнуть проблемы с использованием внешних шрифтов.6. Не работает mouseOver так как нету курсора.7.

11. Можно задавать цвета с альфа-каналом для прозрачности.

12. В свойстве background можно указать вывод нескольких картинок. Поможет сайту с картинками более 5 Мп (2592 х 1944).

Переключение на оптимизированную версию сайта

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

Также общий смысл виден и на этом изображении оптимизированной странички:

С помощью JavaScript можно предоставить пользователю выбор версий сайта на его усмотрение. Пользователь сможет просматривать сайт в обычном виде, и в оптимизированной версии.

Можно организовать автоматическое формирование страниц c учетом верстки под iPhone, для этого нужно внести изменения в PHP код вашего сайта. Подробнее об этом можно прочитать в статье «Сайт для iPhone(url)«.

Приложения для верстальщика. |

Фреймворки для верстки

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

• jQtouch
• IUI
• UiUIKit
• Sencha Touch
• jQuery Mobile