01 Июнь 2011

Warp6: прокачиваем мобильную тему

Опубликовано в tutOrials, Блог, Молескин, Обучение, iOS, Joomla, Програмирование

Ребята из YOOtheme на славу потрудились над Warp6, получился отличный фреймворк. Но его нужно немного прокачать для того, что бы сделать из сайта полноценный WebApp.

Add to Home Screen

Для начала, нужно создать иконку для приложения. Я сделал одну иконку размером 114×114 пикселей, потому что она слабо-детализирована и легко уменьшается устройством без потери качества. Если у твоей иконки много мелких элементов, то лучше сделать 3 иконки (57×57, 72×72 и 114×114) и почистить их вручную.

Потом я решил, что мне не нужен блик на иконке, для этого идем в {template-name}/warp/systems/joomla.1.6(или 1.5)/layouts/head.php и меняем:

<link rel="apple-touch-icon" href="<?php echo $this['path']->url('template:apple_touch_icon.png'); ?>" />
на 
<link rel="apple-touch-icon-precomposed" href="<?php echo $this['path']->url('template:apple_touch_icon_precomposed.png'); ?>" />
, т. е. в атрибуте rel добавляем «precomposed».

Если ты сделал 3 иконки, то меняем на:

<link rel="apple-touch-icon" href="<?php echo $this['path']->url('template:apple_touch_icon.png'); ?>" />
<link rel="apple-touch-icon" sizes="72x72" href="<?php echo $this['path']->url('template:apple_touch_icon_ipad.png'); ?>" />
<link rel="apple-touch-icon" sizes="114x114" href="<?php echo $this['path']->url('template:apple_touch_icon_iphone4.png'); ?>" />
и заливаем соответствующие файлы в корневой каталог шаблона.

Теперь идем в {template-name}/styles/mobile/layouts/template.php и добавляем в тег head:

<meta name="apple-mobile-web-app-capable" content="yes" />
Что бы убрать адрес бар в режиме вебаппа.
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Перекрашиваем статус бар в нужный нам цвет, варианты: default, black, black-translucent.
<link rel="apple-touch-startup-image" href="<?php echo $this['path']->url('template:startup.png'); ?>" />

Что-бы девайс мог скачать загрузочное изображение и показывать его во время загрузки вебаппа. Изображение должно быть 320×460 пикселей и в формате png.

А вот готовый результат:

Add to Home Screen Pick name for App Home Screen Loading Screen kolyan's WebApp

PS Что бы логотип в хедере и логотип в футере хорошо выглядели на ретина дисплее ужимаем его программно т. е., например, создаем файл 100×100, в теге img добавляем атрибуты width="50" height="50"

Leave a comment

You are commenting as guest. Optional login below.