Закреплённые сайты: создание и управление из сценариев (ч.1)
16636
Одна из ключевых особенностей Internet Explorer 9 - так называемые закреплённые веб-сайты (в оригинале Pinned Sites). Кратко их можно охарактеризовать как обычные веб-сайты, но ведущие себя как отдельные приложения Windows и предлагающие пользователю некоторые дополнительные возможности.
Чтобы создать закреплённый веб-сайт, сначала следует открыть его в веб-браузере обычным способом. После этого нужно найти в поле ввода, куда мы вводим интернет-адрес, левее самого интернет-адреса, небольшую иконку и перетащить её мышью на панель задач, рабочий стол или в меню Пуск. После этого там появится ярлык закреплённого веб-сайта; если щёлкнуть на нём, соответствующий веб-сайт будет тотчас открыт.
Примечание:
Закреплённые веб-сайты поддерживаются только Internet Explorer 9, работающим в среде Windows 7.
Ключевые особенности закреплённых веб-сайтов перечислены ниже.
- Закреплённый сайт всегда открывается в отдельном окне браузера и, как говорилось ранее, ведёт себя как отдельное приложение.
- Кнопки Вперёд и Назад действуют только в пределах закреплённого веб-сайта.
- Иконка закреплённого сайта (если она есть) отображается в верхнем левом углу окна браузера, в котором открыт этот сайт, левее кнопки Вперёд. Данная иконка выступает в роли кнопки Домой и при щелчке на ней открывает в браузере начальную страницу (веб-страницу, интернет-адрес которой хранится в ярлыке закреплённого сайта).
- Контекстное меню ярлыка закреплённого сайта, расположенного на панели задач, может иметь набор дополнительных пунктов (команд из списка переходов), ведущих на различные веб-страницы этого сайта (как создаются эти пункты, мы рассмотрим в этой статье).
- Окно браузера, в котором открыт закреплённый веб-сайт, и его элементы управления окрашены в цвета иконки сайта. Это позволяет сразу отличить данное окно браузера от других окон.
Internet Explorer 9 предоставляет две возможности, связанные с закреплёнными сайтами. Во-первых, мы можем указать некоторые параметры такого сайта, записав в HTML-код его веб-страниц специальные теги HTML. Во-вторых, мы можем программно, из веб-сценариев, управлять закреплёнными сайтами: закреплять их, создавать команды списка переходов, панель инструментов и наложения. Рассмотрению всех этих возможностей и будет посвящена данная статья.
1. Подготовительные действия
Но сначала ознакомимся с параграфами 2.2 и 3.2 . Описанные там вещи обязан принять во внимание любой веб-программист, который планирует задействовать вышеупомянутые возможности в своих веб-страницах.
2. Задание параметров закреплённого сайта
Параметры закреплённого сайта включают в себя его название, текст всплывающей подсказки, интернет-адрес начальной веб-страницы, интернет-адрес иконки, размеры окна браузера, в котором он будет открыт, цвет окна и набор команд в списке переходов. Все эти параметры являются необязательными.
2.1. Как задаются параметры закреплённого сайта
Для указания параметров закреплённого сайта используются особые одинарные теги <META>. Формат их записи приведён ниже.
<META NAME="<имя параметра>" CONTENT="<значение параметра>">
а>">[/code]
Теги <META> должны присутствовать в секции заголовка веб-страницы (в теге <HEAD>). Если поместить их в другое место HTML-кода страницы, браузера не обработает их правильно. Ниже приведён фрагмент кода веб-страницы, в котором присутствуют три таких тега.
[code]<!DOCTYPE html>
<HTML>
<HEAD>
. . .
<META NAME="application-name" CONTENT="Закреплённый Web-сайт">
<META NAME="msapplication-tooltip"
CONTENT="Щёлкните на этом ярлыке, чтобы открыть закреплённый Web-сайт">
<META NAME="msapplication-starturl" CONTENT="http://www.somesite.ru/welcome.html">
. . .
</HEAD>
<BODY>
. . .
</BODY>
</HTML>[/code]
Здесь мы указали для закреплённого сайта название, текст всплывающей подсказки и интернет-адрес начальной веб-страницы.
Все параметры закреплённого сайта, поддерживамые Internet Explorer 9, делятся на две группы. Сейчас мы их рассмотрим.
2.2. Параметры времени установки
Параметры закреплённого сайта времени установки действуют только в момент собственно закрепления этого веб-сайта в меню Пуск, панели задач или на рабочем столе. Они определяют параметры самого ярлыка, указывающего на этот сайт. Если мы изменим эти параметры в HTML-коде страницы, то в параметрах уже созданного ярлыка эти изменения отражены не будут.
Имена всех доступных нам параметров времени установки перечислены ниже; там же приведены их описания.
- application-name - задаёт имя закреплённого сайта. Это имя будет присутствовать в заголовке окна браузера, в котором открыт закреплённый веб-сайт, а также будет использоваться в качестве текста всплывающей подсказки, которая появится после наведения курсора мыши на ярлык этого сайта. Кроме того, данное имя будет использовано в качестве имени самого файла ярлыка. Если данный параметр не указан, в качестве имени закреплённого сайта будет использован заголовок веб-страницы, открытой в момент закрепления сайта (содержимое её тега <TITLE>), сокращённое до 128 символов.
- msapplication-tooltip - задаёт текст всплывающей подсказки, выводящейся на экран при наведении курсора мыши на ярлык, находящийся в меню Пуск или на рабочем столе. Если он не указан, в качестве всплывающей подсказки будет использован заголовок веб-страницы, открытой в момент закрепления сайта.
- msapplication-starturl - задаёт интернет-адрес начальной веб-страницы закреплённого сайта. Если не указан, в качестве начальной будет использована страница, открытая в момент закрепления сайта. При указании интернет-адреса начальной веб-страницы следует учесть две вещи. Во-первых, поддерживаются только протоколы HTTP и HTTPS. Во-вторых, если указывается интернет-адрес папки, то в конце интернет-адреса следует поставить слэш. Вот так:
[code]<META NAME="msapplication-starturl" CONTENT="http://www.somesite.ru/start/">[/code]
А так - неправильно:
[code]<META NAME="msapplication-starturl" CONTENT="http://www.somesite.ru/start">[/code]
Разумеется, если указывается интернет-адрес конкретной веб-страницы, слэш ставить не нужно:
[code]<META NAME="msapplication-starturl" CONTENT="http://www.somesite.ru/welcome.html">[/code] - msapplication-window - задаёт изначальные размеры окна браузера, в котором будет открыт закреплённый веб-сайт. Разумеется, пользователь может потом изменить его размеры. Значение этого параметра указывается в следующем формате:
[code]width=<ширина>;height=<высота>[/code]
<Ширина> и <высота> указываются в виде чисел в пикселах. Минимальное значение <ширины> - 800 пикселов, <высоты> - 600 пикселов.
[code]<META NAME="msapplication-window" CONTENT="width=1024;height=768">[/code]
Если размеры окна не указаны, окно будет иметь размеры по умолчанию.
2.3. Параметры времени выполнения
В отличие от параметров закреплённого сайта времени установки, параметры времени выполнения считываются и обрабатываются каждый раз при открытии веб-страницы. Они определяют цвет окна браузера и набор команд в списке переходов ярлыка, указывающего на закреплённый веб-сайт. Не забываем, что эти параметры имеют смысл только в том случае, если страница принадлежит закреплённому веб-сайту.
Поскольку эти параметры обрабатываются при открытии любой веб-страницы данного сайта, мы можем определить отдельный набор команд в списке переходов (и, при желании, отдельный цвет окна браузера, но это уже явно лишнее) для каждой страницы. Так, кстати, часто и делают.
Список имён и описаний доступных нам параметров времени выполнения приведён ниже.
- msapplication-navbutton-color - задаёт цвет окна и кнопок Вперёд и Назад. Значение этого параметра должно представлять собой значение цвета, указанное в любом формате, который поддерживается стандартом CSS3. Разработчики Internet Explorer рекомендуют использовать тёмные цвета, чтобы данные кнопки были хорошо заметны.
Если данный параметр не указан, используется базовый цвет иконки веб-сайта.
[code]<META NAME="msapplication-navbutton-color" CONTENT="black">[/code]
Здесь мы указали для окна и кнопок Вперёд и Назад чёрный цвет.
- msapplication-task - создаёт одну команду в списке переходов.
Примечание:
На данный момент поддерживает только создание команд в списке переходов, выполняющих переход на другую веб-страницу.
Значение этого параметра задаёт данные, необходимые для создания команды, и указывается в следующем формате:
[code]name=<текст надписи пункта контекстного меню, соответствующего команде>;
action-uri=<интернет-адрес веб-страницы, на которую будет выполнен переход
при выборе данной команды>;
icon-uri=<интернет-адрес иконки, которая будет отображаться в пункте
контекстного меню, левее его надписи>
[; window-type=<цель>][/code]
Здесь всё большей частью понятно. Кроме <цели>...
<Цель> указывает, где будет открыта веб-страница, на которую был выполнен переход. Цель tab указывает, что веб-страница должны быть открыта в новой вкладке текущего окна браузера, цель self - в текущей вкладке, а цель window - в новом окне. Если цель не указана, веб-страница будет открыта в новой вкладке (как если бы мы указали цель tab).
Примечание:
Все команды в списке переходов должны иметь уникальные надписи.
Иконки, которые будут использованы в пунктах контекстного меню ярлыка, соответствующих командам в списке переходов, должны иметь размеры 16х16 пикселов.
[code]<META NAME="msapplication-task" CONTENT="name=Справка;
action-uri=/help.html;icon-uri=/icons/question-mark.ico">[/code]
Здесь мы создали команду в списке переходов, которая откроет веб-страницу "Справка".
[code]<META NAME="msapplication-task" CONTENT="name=Справка;
action-uri=/help.html;icon-uri=/icons/question-mark.ico;window-type=window">[/code]
А эта команда откроет ту же веб-страницу в новом окне браузера.
Если нам нужно создать несколько команд в списке переходов, мы укажем в HTML-коде несколько соответствующих им тегов <META>. Максимальное количество команд, которые можно создать таким образом, - 5.
Примечание:
Вообще-то, можно создать сколько угодно команд, но отображаться на экране будут только 5 созданных самыми последними.
Например, такой HTML-код создаст команды в списке переходов для веб-сайта какого-нибудь интернет-магазина:
[code]<META NAME="msapplication-task" CONTENT="name=Войти;
action-uri=/login.aspx;icon-uri=/icons/login-icon.ico;window-type=self">
<META NAME="msapplication-task" CONTENT="name=Список товаров;
action-uri=/goods.aspx;icon-uri=/icons/goods-icon.ico;window-type=self">
<META NAME="msapplication-task" CONTENT="name=Корзина;
action-uri=/basket.aspx;icon-uri=/icons/basket-icon.ico;window-type=tab">
<META NAME="msapplication-task" CONTENT="name=Купить;
action-uri=/buy.aspx;icon-uri=/icons/buy-icon.ico;window-type=tab">
<META NAME="msapplication-task" CONTENT="name=Выйти;
action-uri=/logout.aspx;icon-uri=/icons/logout-icon.ico";window-type=self>[/code]
- msapplication-task-separator - создаёт разделитель между командами в списке переходов. В качестве значения должно быть указано уникальное имя создаваемого разделителя.
В качестве примера давайте возьмём приведённый выше HTML-код, создающий команды веб-сайта интернет-магазина, и отделим команды Войти и Выйти от остальных разделителями.
[code]<META NAME="msapplication-task" CONTENT="name=Войти;
action-uri=/login.aspx;icon-uri=/icons/login-icon.ico;window-type=self">
<META NAME="msapplication-task-separator" CONTENT="sep1">
<META NAME="msapplication-task" CONTENT="name=Список товаров;
action-uri=/goods.aspx;icon-uri=/icons/goods-icon.ico;window-type=self">
<META NAME="msapplication-task" CONTENT="name=Корзина;
action-uri=/basket.aspx;icon-uri=/icons/basket-icon.ico;window-type=tab">
<META NAME="msapplication-task" CONTENT="name=Купить;
action-uri=/buy.aspx;icon-uri=/icons/buy-icon.ico;window-type=tab">
<META NAME="msapplication-task-separator" CONTENT="sep2">
<META NAME="msapplication-task" CONTENT="name=Выйти;
action-uri=/logout.aspx;icon-uri=/icons/logout-icon.ico;window-type=self">[/code]
Количество создаваемых таким образом разделителей не ограничено.
Напоследок - ещё несколько важных моментов.
Команды в списке переходов, которые мы создали с помощью тегов <META>, остаются неизменными всё время, пока данная веб-страница открыта в окне браузера. Мы не сможем изменить их состав из веб-сценариев. Именно поэтому такие команды называются статическими. Все статические команды присутствуют в контекстном меню ярлыка в категории Задачи.
Интересно, что все статические команды, что мы создадим, будут присутствовать в контекстном меню ярлыка даже после того, как окно браузера, где мы открыли закреплённый веб-сайт, будет закрыто. Таким образом, мы можем дать пользователю возможность открыть нужную ему страницу закреплённого веб-сайта напрямую, без открытия начальной страницы и долгого "путешествия" по гиперссылкам.
Забегая вперёд, скажем, что Internet Explorer 9 также поддерживает создание команд в списке переходов из веб-сценариев. Эти команды формируют в списке отдельную группу, могут сосуществовать со статическими командами, а их набор в процессе просмотра веб-страницы может изменяться с помощью веб-сценариев. Как работать с такими командами, мы узнаем в следующих статьях цикла.
Дополнительные материалы
Продолжение следует...
Март 2011
Комментарии
