Фев 13

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

 

Пошаговая ИНСТРУКЦИЯ как превратить свой обычный сайт в прикрепленный (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/. Только помните, что ваш файл должен содержать несколько изображений.

Шаг второй

       Использовать плагины или вручную писать сложный код мы не будим. Ниже шаблон-заготовка. Пишем имя нашего сайта,  число строк в меню можно менять – нужно больше, скопируйте строку меню несколько раз, меньше – уберите. Для удобства использования я сохранил прокомментированный кусок кода в файл http://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», «http://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.  Шаблонный текст, который Вы видели выше, был сделан на основе кода, сгенерированного этим самым плагином. Можно было написать его полностью ручками от и до, но смысл? Особого не было, в отличие от времени, которого мне всегда не хватает.  Вот собственно и все,  желаю успехов в создании прикрепленных сайтов!

 

Поделитесь статьей со своими друзьями
Общайтесь со мной:
comments: Closed tags: ,

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

  1. Dear Igor,
    Please email me the error message you got when you try to active IE9-pinned-site plugin, I’ll be glad to solve your issue.

    Regards,
    Fatih Boy

  2. Здравствуйте, Fatih Boy!
    Я установил разработанный вами плагин ie9-pinned-site.1.1.2 на своем сайте http://www.mctrewards.ru без ошибок. Когда я стал регистрировать свой сайт для участия в конкурсе на странице http://msdn.microsoft.com/ru-ru/ie/gg491690.aspx, то получил сообщение, что мой прикрепленный сайт содержит ошибку кода и регистрация невозможна. Какой либо уточняющей информации, почему код не правильный не было. Возможно, что это ошибка самой системы проверки сайта, так как внешне прикрепленный сайт, созданный с использованием плагина ie9-pinned-site.1.1.2, выглядит совершенно правильно. Надеюсь, что кто-то из людей попробует зарегистрировать свой прикрепленный сайт, созданный с помощью плагина ie9-pinned-site.1.1.2 и тогда будет понятно, это была случайная ошибка или нет.
    С уважением, Игорь Ананченко

    Hello, Fatih Boy!
    I installed the plugin you developed ie9-pinned-site.1.1.2 on its website http://www.mctrewards.ru without errors. When I began to register your site for the contest page http://msdn.microsoft.com/ru-ru/ie/gg491690.aspx, then got a message that my attachment site has an error code and registration is not possible. What or specific information as to why the code is not correct was not. Perhaps it was a mistake the system checks the site, so as externally attached a site created using the plugin ie9-pinned-site.1.1.2, looks quite right. I hope that someone from the people try to register the attached website, created with the plugin ie9-pinned-site.1.1.2 and then it will be clear, this was a random error or not.
    Sincerely, Igor Anantchenko

  3. Для удобства использования я сохранил прокомментированный кусок кода в файл http://www.mctrewards.ru/files/ps.zip, так как заметил, что не во всех браузерах выделяемый фрагмент страницы копируется корректно.

  4. Полезные ссылки
    Узнать больше об Internet Explorer 9 RC: http://msdn.microsoft.com/ru-ru/ie/gg285312.
    Сравнить скорость браузера с другими браузерами: http://www.ietestdrive.com.

  5. Юрий Домрачев:

    Проголосовал за клуб и ваш блог

  6. Также проголосовал. А статью – в избранное.

  7. Спасибо!
    Заметил, что господа из Екатеринбургского MCP клуба выложили интерсный материал по IE9
    http://ekbit.pro/wp-content/presentations/html5.zip У меня он тоже был, но без права публикации. Поэтому даю ссылку на уже опубликованное другими. Выступление по теме IE9 запланировно и в нашем MCP клубе

  8. Dear Igor,
    Within my plugin, I did add a browser check; so that your page will not output any IE9 related stuff for other browsers (i.e. : Firefox, Chrome ) which aims to page’s footprint for non-supported browsers. The issue could be releated with that browser check; remote web site propably not identified itself as IE9 and got no IE9 releated output.

    Today, it seems that more and more browser will support IE9′s pinned site featured whether build-in or using plugins. Next relaease of my plugin will not check for browser version for the reasons above; and hope that will also solve your issue.

    Regards,

    Fatih Boy

    http://www.enterprisecoding.com
    http://twitter.com/fatihboy



Pings responses to this post