Пошаговая ИНСТРУКЦИЯ как превратить свой обычный сайт в прикрепленный (Pinned Sites  в Internet Explorer 9)

 

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

 

  Итак,  вводная следующая,  есть релиз-кандидат Internet Explorer 9 (Скачать релиз-кандидат IE9 бесплатно http://windows.microsoft.com/en-US/internet-explorer/downloads/ie-9/worldwide-languages) есть новая технология прикрепленных сайтов, которая пока еще никем особо не востребована и другими браузерами не поддерживается. Что будет дальше, поживем, увидим. Для повышения интереса Microsoft объявила конкурс, в котором  победят те сайты, за которые больше всего проголосует людей. В общем, у владельцев сайтов с большой и доброжелательной аудиторией, отличные перспективы. Для сайтов типа моего —  перспектив ноль. (С чего это, Вы станете жать на этот баннер, приведенный ниже,  и голосовать за меня? Впрочем, если Вы проголосовали ЗА — огромное Вам спасибо).

 

Однако, для того, чтобы сделать любой сайт прикрепленным быстро и без проблем, есть одна сложность. Технология новая, описания ее есть (список источников ниже), но разбираться надо, а многим людям просто жаль терять свое время. Приведенное ниже описание позволяет сделать прикрепленный сайт быстро и без прочтения “лишней” литературы. Инструкцию попытался сделать настолько подробной и простой, чтобы ее мог воспроизвести любой “чайник” 

     

Конкурс «Прикрепи свой сайт!»

Зарегистрировать сайт в конкурсе

Статистика

Обучающие материалы

Введение в возможности Прикрепленных сайтов (Pinned Sites) в Internet Explorer 9

Краткий обзор технологии Pinned Sites

Секреты Pinned Sites

Введение в средства разработчика Internet Explorer

Средства разработчика Internet Explorer: HTML

Средства разработчика Internet Explorer: CSS

 

Инструкция

 

Прикрепленный сайт выглядит примерно так.  Если Вы хотите узнать, какие преимущества можно получить, превратив обычный сайт в прикрепленный, читайте документацию, ниже только о том, как это сделать быстро с максимальной экономией времени и сил. Для победы в конкурсе нужно выполнить два условия: 1) голоса, 2) сайт прикрепленный. Обратите вниманием, что через систему проверки пройдет не любой сайт, который видим практически как прикрепленный, а только тот, для которого выполнены все формальности.

Шаг первый

     Для того чтобы сайт прошел проверку,  следует помнить, что одной иконки стандартного размера 16 на 16 пикселей недостаточно.  В файле иконки .ico (обычно это файл favicon.ico, хотя имя может быть другим) может храниться не одна картинка, а несколько разных. Если у Вас только одна 16 на 16 пикселей, то не пройдете тест. Нужно чтобы был еще значок 32×32 px для десктопа, значок 48×48 px для десктопа, тоже лишним не будет. Можно добавить и большего размера картинки, но это увеличение размера файла, а, значит, и наша страница будет загружаться дольше. Вы можете за три минуты из графического файла без проблем сделать один  .ico файл, содержащий три изображения? Легко, если знать эту ссылку http://favicon.ru/. Только помните, что ваш файл должен содержать несколько изображений.

Шаг второй

       Использовать плагины или вручную писать сложный код мы не будим. Ниже шаблон-заготовка. Пишем имя нашего сайта,  число строк в меню можно менять – нужно больше, скопируйте строку меню несколько раз, меньше – уберите. Для удобства использования я сохранил прокомментированный кусок кода в файл https://www.mctrewards.ru/files/ps.zip, так как заметил, что не во всех браузерах выделяемый фрагмент страницы копируется корректно.

<!— IE9 Pinned Site —>

<meta content=»1.0″ />

<meta content=»MCP Club» />

<meta content=»Санкт-Петербургский клуб сертифицированных специалистов» />

<meta content=»http://mcp-club.net» />

<meta content=»name=Home Page;action-uri=http://mcp-club.net;icon-uri=http://mcp-club.net/favicon.ico» />

<script>

if (window.external && window.external.msIsSiteMode()) {

var wext=window.external;

wext.msSiteModeCreateJumplist(«Список быстрого перехода к:»);

window.external.msSiteModeAddJumpListItem(«Новости Клуба», «http://mcp-club.net/», «http://mcp-club.net/post.ico»);

window.external.msSiteModeAddJumpListItem(«О проекте», «http://mcp-club.net/?page_id=2», «http://mcp-club.net/post.ico»);

window.external.msSiteModeAddJumpListItem(«Информационные материалы», «http://mcp-club.net/?page_id=731», «http://mcp-club.net/post.ico»);

window.external.msSiteModeAddJumpListItem(«MCP-клуб в Вконтакте», «http://vkontakte.ru/club23519301», «http://mcp-club.net/post.ico»);

window.external.msSiteModeAddJumpListItem(«Российские MCP-клубы», «http://technet.microsoft.com/ru-ru/dd764688.aspx», «http://mcp-club.net/post.ico»);

window.external.msSiteModeAddJumpListItem(«www.mctrewards.ru», «https://www.mctrewards.ru/», «http://mcp-club.net/post.ico»);

wext.msSiteModeShowJumplist();

}

</script>

<!— /IE9 Pinned Site —>

Рассмотрим одну из строк меню, даже не всю, а интересующий нас фрагмент.  … stItem(«Информационные материалы«, «http://mcp-club.net/?page_id=731«, «http://mcp-club.net/post.ico«);

В двойных кавычках первый элемент – это название пункта, второй – строка для вызова этого пункта (ссылка не обязательно должна вести именно на этот сайт, можно и на другой), третья группа – это путь к файлу с графическим элементом, который будет отображаться рядом с пунктом меню. (стандартный файл ico, если не знаете откуда его взять готовым, сделайте его сами, используя  http://favicon.ru/ или какой либо графический редактор, позволяющий создавать ico).

Шаг третий 

 Два или более, так как у каждого пункта может быть свой персональный ico , файла ico помещаем на свой сайт, так чтобы они были доступны по соответствующим путям (типа, http://mcp-club.net/post.ico)

Шаг четвертый

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

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

    Собственно, вот и все.  Если Вы видите в  Internet Explorer 9,  что у Вас полноценный прикрепленный сайт, но тест он не проходит, то проверьте, где в вашей секции <head>…  </head> стоят другие возможные ссылки или ссылка на икону.  Если, да, есть таки и тест не проходит, то перетащите их после вставленного Вами кода, чтобы получалось примерно так:

<!— /IE9 Pinned Site —>

<link rel=»icon» href=»http://mcp-club.net/favicon.ico»>

<link rel=»shortcut icon» href=»http://mcp-club.net/favicon.ico»>

</head>

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

       Многие современные сайты работают на движке wordpress. Для быстрого создания прикрепленного сайта существует специальный плагин ie9-pinned-site.1.1.2  http://www.enterprisecoding.com/blog/projects/ie9-pinned-site . Прикрепленный сайт сделать легко, просто, но когда я им воспользовался, то тест на прикрепленный сайт, сайт не прошел. Возможно, что это был только мой конкретный вариант и эффект возник из-за совместного использования еще каких-то других установленных плагинов.  Времени разбираться, почему внешне нормально выглядящий прикрепленный сайт не прошел тест,  у меня не было (будет время и желание, разберусь и напишу), поэтому я вручную вписал код в заголовок, исправив файл header.php.  Шаблонный текст, который Вы видели выше, был сделан на основе кода, сгенерированного этим самым плагином. Можно было написать его полностью ручками от и до, но смысл? Особого не было, в отличие от времени, которого мне всегда не хватает.  Вот собственно и все,  желаю успехов в создании прикрепленных сайтов!