Что такое прикрепленные сайты и как их сделать самому

Игорь Ананченко (С.-Петербург)

В феврале 2011 г. фирма Microsoft представила пользователям всего мира новую версию — кандидат веб-браузера Internet Explorer 9 . Версия является предварительной. Официально новый веб-браузер Internet Explorer 9 (IE9), как полностью законченный программный продукт, еще не выпущен, но фактически это последний шаг к финальной версии. С сайта Microsoft можно бесплатно загрузить как англоязычную версию, так и версии, локализованные для многих других языков, в том числе русского.

BIGITALRU_11

Выбрать версию: <http://windows.microsoft.com/ru-RU/internet-explorer/downloads/ie.

Русскоязычная версия-кандидат IE9 для 32-разрядных ОС доступна для загрузки по ссылке http://download.microsoft.com/download/C/9/A/C9A53863-199C-4D82-84DD-C46C46C6FE50/IE9-Windows7-x86-rus.exe.

Internet Explorer 9 достаточно сильно отличается от своего восьмого предшественника. Улучшения затронули как визуальные, так и не визуальные компоненты (http://www.microsoft.com/ru-ru/windows/internet-explorer/onlinekrasota/). Значительно возросла скорость работы, особенно это ощущается на компьютерах с несколькими процессорами или процессором с несколькими ядрами за счет поддержки технологии распараллеливания вычислений. Второй существенный момент, обеспечивающий более быструю и комфортную работу пользователей, поддержка работы с аппаратными ускорителями. Сейчас практически в любом современном компьютере установлена видеокарта, поддерживающая специальные функции обработки графических элементов. Поэтому центральный процессор компьютера может не заниматься самостоятельно обработкой графики, а передать эти функции специальному процессору, установленному на видеокарте и отвечающему за обработку видео, но возможно это только в том случае, если программное обеспечение поддерживает такую возможность. Именно такая поддержка, обеспечивающая быстрый и зрелищный просмотр страниц сайтов сети Интернет, реализована в новом Internet Explorer 9. Все другие выпущенные на конец февраля 2011 г. современные браузеры, по данным Microsoft (http://www.microsoft.com/ru-ru/windows/internet-explorer/onlinekrasota/#/highlights/all-around-fast), способны использовать около 10% вычислительной мощности компьютера, а Internet Explorer 9 задействует все 90%. Довольно скептически отношусь к весьма привлекательным цифрам, когда их приводит производитель программного обеспечения, а не независимый эксперт, но согласен с тем, что работает Internet Explorer 9 быстрее других своих предшественников и тех веб-браузеров от сторонних производителей, с которыми я работаю. Но есть и другие плюсы, кроме высокой скорости работы, например, Google Chrome хотя и несколько уступает в скорости IE9, но работать с ним мне очень удобно из-за большого числа специализированных плагинов.

Активное развитие технологии ActiveX позволяет вебмастерам организовать интерактивные элементы интерфейса на их сайтах, но использование этой технологии злоумышленниками может нанести вред пользователям, просматривающим сайты. В Internet Explorer 9 можно заблокировать использование элементов ActiveX для всех просматриваемых сайтов, кроме тех, которые сам пользователь внес в белый список.

Microsoft уделяет большое внимание безопасности пользователей, работающих в Интернет. Поэтому неудивительно, что в новой версии Internet Explorer есть специальная функция защиты от слежки. При обращении пользователя к сайтам сети Интернет, в ответ на запросы сервера, веб-браузер может сообщать достаточно много служебной информации, которая используется, как правило, для того, чтобы сервер мог интерактивно подстроиться к работе с конкретным пользователем, учитывая разрешение его монитора, тип и версию веб-браузера и так далее. Но не всегда такая общительность веб-браузера является плюсом, поэтому оправдана функция защиты, позволяющая ограничить взаимодействие с сайтами, включенными в список защиты от слежения. По данным NSS Labs Internet Explorer 9 самый безопасный браузер для социальных сетей (http://www.microsoft.com/ru-ru/windows/internet-explorer/onlinekrasota/#/highlights/security).

Internet Explorer 9 тесно интегрирован с операционной системой Windows. Использование новой технологии прикрепленных сайтов позволят обособить выбранный пользователем сайт, закрепив его на панели задач. Закрепленный сайт отображается в виде уникального эскиза, одного щелчка мыши по которому достаточно для доступа к этому сайту. За показ сайта, естественно, отвечает Internet Explorer 9, но для показа запускается отдельный экземпляр приложения. Поэтому если веб-браузер пользователя, просматривающего сайты сети Интернет, вдруг зависнет, то это не затронет прикрепленный сайт. Название «прикрепленный» было использовано еще и потому, что вебмастер может для своего сайта указать, используя специальный код, что будет дополнительно доступно пользователю, прикрепившему сайт. Например, при выборе закрепленного сайта пользователь будет видеть меню, содержащее перечень предопределенных вебмастером страниц. После запуска окно веббраузера и органы управления окрашиваются в основной цвет прикрепленного вебсайта, отображается логотип сайта. Все это создает впечатление, что сайт встроен в саму операционную систему.

Работать с прикрепленными сайтами очень удобно, но, к сожалению, такую возможность поддерживает пока только Internet Explorer 9.

Стоит ли прямо сейчас реализовывать возможность прикрепленности для своих сайтов? Основной довод «ЗА», IE9 скоро станет популярным и его многочисленные пользователи получат дополнительное удобство в работе, обращаясь к вашим сайтам. Поддержка новых возможностей свидетельствует о том, что его владелец относится к своему ресурсу с должным вниманием и заботится о посетителях. Довод «ПРОТИВ» чисто технический. Так как в веб-страницы встраивается неизвестный для других браузеров код, то не факт, что он будет просто пропущен. Всегда остается вероятность, что некий веббраузер какой-то там версии начнет его обрабатывать по собственному разумению. По большому счету не слишком приятно, но допустимо, если малая доля посетителей не сможет просмотреть страницы вебсайта. Гораздо хуже, если какой либо из интернет поисковиков, просматривая страницы сайта, сочтет их содержащими ошибочный код и понизит рейтинг сайта или просто выкинет «ошибочные» страницы из поисковой выдачи. С учетом аргументов за и против, вероятно следует организовывать прикрепленность для зеркал (копий) сайтов, а также в том случае если ожидаемые плюсы перекрывают возможные издержки.

Многие современные сайты используют движок wordpress. Для быстрого создания прикрепленных сайтов вебмастера могут использовать специальный плагин ie9-pinned-site или разработать код полностью самостоятельно от начала и до конца. Разберем на уровне пошаговой инструкции, как это сделать. Для того, чтобы изучение не было слишком скучным и появился реальный стимул, отмечу интересную информацию о конкурсе, проводимым Microsoft. Для повышения интереса к IE9 в общем и технологии прикрепленных сайтов в частности, Microsoft объявила конкурс «Прикрепи свой сайт!», в котором победят те сайты поддерживающие прикрепленную технологию, за которые больше всего проголосует людей (http://msdn.microsoft.com/ru-ru/ie/gg491690.aspx). Инструкцию попытался сделать настолько подробной и простой, чтобы ее мог воспроизвести любой «чайник. Хотя приведенное ниже описание позволяет сделать прикрепленный сайт быстро и без прочтения «лишней» литературы, но для лучшего понимания сути того, почему делаем именно так, а не иначе, рекомендую посмотреть обучающие материалы:

  • Введение в возможности Прикрепленных сайтов (Pinned Sites) в Internet Explorer 9 (http://msdn.microsoft.com/ru-ru/ie/gg285311)
  • Краткий обзор технологии Pinned Sites (http://msdn.microsoft.com/ru-ru/ie/gg285317)
  • Секреты Pinned Sites (http://msdn.microsoft.com/ru-ru/ie/gg285312)
  • Введение в средства разработчика Internet Explorer (http://msdn.microsoft.com/ru-ru/ie/ff817549)
  • Средства разработчика Internet Explorer: HTML (http://msdn.microsoft.com/ru-ru/ie/ff817549)
  • Средства разработчика Internet Explorer: CSS (http://msdn.microsoft.com/ru-ru/ie/ff955657)

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

Шаг первый

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

BIGITALRU_22

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

Шаг второй

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

<— IE9 Pinned Site —>

<meta name=»IE9 Anantchenko Pinned Site» content=»1.0″ />

<meta name=»application-name» content=»MCP Club» />

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

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

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

<script type=»text/javascript»>

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»);

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

wext.msSiteModeShowJumplist();

}

</script>

<— /IE9 Pinned Site —>

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

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

<lt!— конец кода —>

Рассмотрим одну из строк меню, даже не всю, а интересующий нас фрагмент. … 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)

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

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

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

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

<!- /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. Шаблонный текст, который вы видели выше, был сделан на основе кода, сгенерированного этим самым плагином. Можно было написать его полностью ручками от и до, но смысл? Особого не было, в отличие от времени, которого мне всегда не хватает. Загрузив этот небольшой в 30 килобайт архив http://магия-пк.рф/pinned.zip, вы сможете посмотреть код полностью готового прикрепленного сайта http://магия-пк.рф/ (как он отображается в IE9, будучи прикрепленным, вы видели на приведенном выше скриншоте). Сайт состоит только из одной страницы, но полностью отвечает всем формальным требованиям, предъявляемым к конкурсным сайтам «Прикрепи свой сайт!», успешно прошел проверку и был допущен к голосованию.

Вот, собственно, и все, надеюсь, что информация о возможностях нового Internet Explorer 9, которую вы сейчас прочитали, будет полезной в практической работе.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *