13.10.13, 14:12
0 комментарий
  DLE Хаки

Создание приложения из сайта на iOS и Windows 8

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

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

Создание приложения из сайта на iOS и Windows 8
Создание приложения из сайта на iOS и Windows 8
Создание приложения из сайта на iOS и Windows 8


Открыв новоиспеченное приложение на устройстве под управлением iOS вы увидите Firstvector.org, но без каких либо элементов браузера или ОС. Только сайт, его контент и ничего больше.

Создание приложения из сайта на iOS и Windows 8
Создание приложения из сайта на iOS и Windows 8


Windows 8 условно разделена на две части. Первая - изначальный (старый?), десктопный, вариант, вторая - плиточный интерфейс (Metro UI) ориентированный на устройства с тачскрином. Если приложение создается в Metro IE, то на внешний вид его пиктограммы можно влиять (изображением выше можно увидеть оба варианта), иначе же, при использовании оконного IE, создается стандартная, для таких случаев, плитка единственным графическим элементом которой является favicon.

Запустив сайт-приложение в среде Windows вам отобразиться сайт, но в окне стандартного браузера (IE).

Примечание:
Создать сайт-приложение можно только при помощи стандартных браузеров.
У Apple это Safari, у MS - Internet Explorer.


Манипуляции с исходным кодом и файлами

1. Создаем каталог assets, с подкаталогами apple и win8, в корневой директории серверахостинга.

2. Готовим четыре квадратных изображения-логотипа для iOS в формате png и загружаем их по адресу /assets/apple/. Размеры: 57x57, 72x72, 114x114, 144x144. (примеры есть в архиве и исходниками)

Примечание:
Округлять углы не нужно! iOS сделает это самостоятельно.


3. Готовим логотип для Windows в формате png. Размер: 144x144. Фон: прозрачный. После завершения работы над логотипом необходимо подготовить столько иконок (формат ico, 16x16), сколько разделов вы хотите разместить в вызываемом контекстном меню.

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


4. В каталоге /assets/ создаем файл ios.js и заполняем его следующим содержимым:

jQuery(document).ready(function($){
	$('a').live('click',function(e){e.preventDefault();window.location=$(this).attr('href');});
});


Примечание:
Для работы вышеприведенного кода обязательно наличие подключенного jQuery.
Задача, возложенная на него, не давать открывать Safari при клике по ссылке,
а серфить сайт внутри приложения.


5. Открыть /engine/engine.php, найти:

$metatags = <<<HTML
	// метатеги вашего сайта
HTML;


и после добавить:

/*
=====================================================
 IOS & Windows 8 
=====================================================
*/

if (strpos($_SERVER['HTTP_USER_AGENT'], 'iPad') OR strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone') OR strpos($_SERVER['HTTP_USER_AGENT'], 'iPod')) {
 
	$ios = <<<HTML
 
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<link rel="apple-touch-icon" href="/assets/apple/touch-icon-iphone.png" />
	<link rel="apple-touch-icon" sizes="72x72" href="/assets/apple/touch-icon-ipad.png" />
	<link rel="apple-touch-icon" sizes="114x114" href="/assets/apple/touch-icon-iphone-retina.png" />
	<link rel="apple-touch-icon" sizes="144x144" href="/assets/apple/touch-icon-ipad-retina.png" />
HTML;
 
	$js_array[] = "/assets/ios.js";
 
}
 
if (strpos($_SERVER['HTTP_USER_AGENT'], 'NT 6.2')) $win8 = <<<HTML
 
	<meta name="application-name" content="Techno-Co.RU" />
	<meta name="msapplication-tooltip" content="Запустить приложение Techno-Co"/>
	<meta name="msapplication-starturl" content="http://techno-co.ru" />
	<meta name="msapplication-navbutton-color" content="#FF9600" />
	<meta name="msapplication-TileImage" content="/assets/win8/f.png" />
	<meta name="msapplication-TileColor" content="#ffffff" />
	<meta name="msapplication-task" content="name=Datalife Engine; action-uri=./datalife_engine/; icon-uri=./assets/win8/hos.ico" />
	<meta name="msapplication-task" content="name=WordPress; action-uri=./wordpress/; icon-uri=./assets/win8/wp.ico" />
	<meta name="msapplication-task" content="name=Joomla; action-uri=./joomla/; icon-uri=./assets/win8/joomla.ico" />
	<meta name="msapplication-task" content="name=Drupal; action-uri=./drupal/; icon-uri=./assets/win8/drupal.ico" />
	<meta name="msapplication-task" content="name=Другие CMS; action-uri=./other_cms/; icon-uri=./assets/win8/seo.ico" />
	<meta name="msapplication-task" content="name=Web-Мастеру; action-uri=./web_master/; icon-uri=./assets/win8/wm.ico" />
	<meta name="msapplication-task" content="name=Платное; action-uri=./platnoe/; icon-uri=./assets/win8/magaz.ico" />	
HTML;

/*
=====================================================
 IOS & Windows 8 
=====================================================
*/


Ссылки, название и путь к категориям, имена иконок поменять на свои!

6. Открыть index.php, найти строку:

$tpl->set('{headers}', $metatags ."n". $js_array); 


и заменить ее на:

$tpl->set('{headers}', $metatags . $win8 . $ios ."n". $js_array);


Примечание:
PHP код изначально адаптирован под DLE,
но для людей, которым известно что такое переменная и как ее использовать,
не составит труда изменить его для любых CMS.


Разбор полета. iOS.

Так как большинству пунктов присвоены примечания, то дальнейшее описание коснется, в основном, пунктов 5 и 6. Начнем по-порядку.

<meta name="apple-mobile-web-app-capable" content="yes" />


- используя данный метатег мы убираем элементы управления
Safari (адресная строка, поиск, закладки etc) в iOS и сайт открывается в полноэкранном режиме.

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

Курс - Windows 8

<meta name="application-name" content="Firstvector.org" />


- название приложения в среде Win 8.

<meta name="msapplication-tooltip" content="Start the Firstvector App"/>


- всплывающая подсказка.

<meta name="msapplication-starturl" content="http://firstvector.org/portfolio" />


- начальная страница, отображаемая при запуске
приложения.

<meta name="msapplication-navbutton-color" content="#5593c2" />


- цвет навигационных стрелок в окне Internet Explorer.

<meta name="msapplication-TileImage" content="/assets/win8/f.png" />


- логотип, используемый при создании приложения из Metro
IE.

<meta name="msapplication-TileColor" content="#5593c2" />


- background цвет плитки.

<meta name="msapplication-task" content="name=Name; action-uri=./link; icon-uri=.icon.ico" />


- метатегов данного типа может быть
создано столько, сколько нужно. Каждый такой элемент создает "задачу" для контекстного меню приложения. name - имя разделакатегории, action-uri - ссылка, icon-uri - иконка, отображаемая в контекстном меню задач.

./ - указатель корневой директории.

В шестом пункте произведено подключение блоков кода. За его вывод в секции head будет отвечать макрос {metatags}.

Из строк условий

(if (...) $metatags = '';)


, думаю, понятно, что код для iOS будет использоваться только при просмотре
сайта с устройства под управлением этой ОС. То же самое и для кода, который предназначен для Win 8.

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

Дополнительная информация

<a href="tel:3-097-333-22-11">3-097-333-22-11</a>


- вызов телефонного номера со страницы сайта. Актуально только для
iPhone.

<meta name="format-detection" content="telephone=no" />


- отключение автоматического определения телефонных номеров на
вебстранице (iPhone).

autocorrect="off" autocapitalize="off"


- атрибуты для элементов input и textarea. Первый запрещает автокорректировку слов,
второй - замену строчных букв на заглавные.

<meta name="msapplication-window" content="width=1024;height=768" />


- размер окна браузера при запуске приложения-закладки
(Windows).

<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />


- отмена выделения Skype-номеров.

Автор: BR0kEN
DLE: Все версии

Для супер ленивых в архиве готовые файлы!

СКАЧАТЬ

Вес файла
37.05 Kb

Реклама

Напишите своё мнение

  • acuteaggressiveair_kissangel
    badbbbeachbeee
    biggrinbig_bossblumblush
    boastbombboredombye
    clappingcraycrazycurtsey
    dancedashdeclarediablo
    diroldon-t_mentiondownloaddrinks
    first_moveflirtfocusfool
    friendsgive_heartgive_rosegood
    hangheartheathelp
    hihunterhystericireful
    kingkisslaughlazy
    lolmail1mambaman_in_love
    mdamega_shokmoilmosking
    musicneanegativenew_russian
    okon_the_quietpardonparting
    partypilotpioneerpleasantry
    popcormpranksterprevedpunish
    roflrtfmrussiansad
    sarcasticscarescratchsearch
    secretsensoredshokshout
    slowsmilesmokesoldier
    soldier_girlsorryspitefulspruce_up
    stinkersuicidesunsuperstition
    swoonteasetenderthanks
    thisto_pick_ones_noseto_take_umbragetreaten
    umnikunknwvampirevava
    victorywackowhistlewink
    wizardyahooyesyu
    e101e102e103e104
    e105e106e107e108
    e109e110e111e112
    e113e114e115e116
    e117e118e119e120
    e121e122e123e124
    e125e126e127e128
    e129e130e131e132
    e133e134e135e136
    e137e138e139e140
    e141e142e143e144
    e145e146e147e148
    e149e150e151e152
    e153e154e155e156
    e157e158e159e160
    e161e162e163e164
    e165e166e167e168
    e169e170e171e172
    e173e174e175e176
    e177e178e179e180
    e181e182e183e184
    e185e186e187e188
    e189e190e191e192
    e193e194e195e196
    e197e198e199e200
    e201e202e203e204