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

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

Для начала, нужно создать иконку для приложения. Я сделал одну иконку размером 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.

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

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