Закреплённые сайты: создание и управление из сценариев (ч.1)

Автор: Topol Воскресенье, Май 6th, 2012 Нет комментариев

Рубрика: Операционные системы

Одна из ключевых особенностей Internet Explorer  9 — так называемые закреплённые веб-сайты (в оригинале Pinned Sites). Кратко их можно охарактеризовать как обычные веб-сайты, но ведущие себя как отдельные приложения Windows и предлагающие пользователю некоторые дополнительные возможности.

Чтобы создать закреплённый веб-сайт, сначала следует открыть его в веб-браузере обычным способом. После этого нужно найти в поле ввода, куда мы вводим интернет-адрес, левее самого интернет-адреса, небольшую иконку и перетащить её мышью на панель задач, рабочий стол или в меню Пуск. После этого там появится ярлык закреплённого веб-сайта; если щёлкнуть на нём, соответствующий веб-сайт будет тотчас открыт.

Примечание:
Закреплённые веб-сайты поддерживаются только Internet Explorer 9, работающим в среде Windows 7 .

Ключевые особенности закреплённых веб-сайтов перечислены ниже.

  • Закреплённый сайт всегда открывается в отдельном окне браузера и, как говорилось ранее, ведёт себя как отдельное приложение.
  • Кнопки Вперёд и Назад действуют только в пределах закреплённого веб-сайта.
  • Иконка закреплённого сайта (если она есть) отображается в верхнем левом углу окна браузера, в котором открыт этот сайт, левее кнопки Вперёд. Данная иконка выступает в роли кнопки Домой и при щелчке на ней открывает в браузере начальную страницу(веб-страницу, интернет-адрес которой хранится в ярлыке закреплённого сайта).
  • Контекстное меню ярлыка закреплённого сайта, расположенного на панели задач, может иметь набор дополнительных пунктов (команд из списка переходов), ведущих на различные веб-страницы этого сайта (как создаются эти пункты, мы рассмотрим в этой статье).
  • Окно браузера, в котором открыт закреплённый веб-сайт, и его элементы управления окрашены в цвета иконки сайта. Это позволяет сразу отличить данное окно браузера от других окон.

Internet Explorer 9 предоставляет две возможности, связанные с закреплёнными сайтами. Во-первых, мы можем указать некоторые параметры такого сайта, записав в HTML-код его веб-страниц специальные теги HTML. Во-вторых, мы можем программно, из веб-сценариев, управлять закреплёнными сайтами: закреплять их, создавать команды списка переходов, панель инструментов и наложения. Рассмотрению всех этих возможностей и будет посвящена данная статья.

1. Подготовительные действия
Но сначала ознакомимся с параграфами 2.2 и 3.2 статьи, посвящённой тегам <AUDIO> и <VIDEO>. Описанные там вещи обязан принять во внимание любой веб-программист, который планирует задействовать вышеупомянутые возможности в своих веб-страницах.

2. Задание параметров закреплённого сайта
Параметры закреплённого сайта включают в себя его название, текст всплывающей подсказки, интернет-адрес начальной веб-страницы, интернет-адрес иконки, размеры окна браузера, в котором он будет открыт, цвет окна и набор команд в списке переходов. Все эти параметры являются необязательными.

2.1. Как задаются параметры закреплённого сайта
Для указания параметров закреплённого сайта используются особые одинарные теги <META>. Формат их записи приведён ниже.

Код:
<META NAME=»<имя параметра>» CONTENT=»<значение параметра>»>

Теги <META> должны присутствовать в секции заголовка веб-страницы (в теге <HEAD>). Если поместить их в другое место HTML-кода страницы, браузера не обработает их правильно. Ниже приведён фрагмент кода веб-страницы, в котором присутствуют три таких тега.

Код:
<!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>

Здесь мы указали для закреплённого сайта название, текст всплывающей подсказки и интернет-адрес начальной веб-страницы.

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

2.2. Параметры времени установки
Параметры закреплённого сайта времени установки действуют только в момент собственно закрепления этого веб-сайта в меню Пуск, панели задач или на рабочем столе. Они определяют параметры самого ярлыка, указывающего на этот сайт. Если мы изменим эти параметры в HTML-коде страницы, то в параметрах уже созданного ярлыка эти изменения отражены не будут.

Имена всех доступных нам параметров времени установки перечислены ниже; там же приведены их описания.

  • application-name — задаёт имя закреплённого сайта. Это имя будет присутствовать в заголовке окна браузера, в котором открыт закреплённый веб-сайт, а также будет использоваться в качестве текста всплывающей подсказки, которая появится после наведения курсора мыши на ярлык этого сайта. Кроме того, данное имя будет использовано в качестве имени самого файла ярлыка. Если данный параметр не указан, в качестве имени закреплённого сайта будет использован заголовок веб-страницы, открытой в момент закрепления сайта (содержимое её тега <TITLE>), сокращённое до 128 символов.
  • msapplication-tooltip — задаёт текст всплывающей подсказки, выводящейся на экран при наведении курсора мыши на ярлык, находящийся в меню Пуск или на рабочем столе. Если он не указан, в качестве всплывающей подсказки будет использован заголовок веб-страницы, открытой в момент закрепления сайта.
  • msapplication-starturl — задаёт интернет-адрес начальной веб-страницы закреплённого сайта. Если не указан, в качестве начальной будет использована страница, открытая в момент закрепления сайта. При указании интернет-адреса начальной веб-страницы следует учесть две вещи. Во-первых, поддерживаются только протоколы HTTP и HTTPS. Во-вторых, если указывается интернет-адрес папки, то в конце интернет-адреса следует поставить слэш. Вот так:
    Код:
    <META NAME=»msapplication-starturl» CONTENT=»http://www.somesite.ru/start/»>

    А так — неправильно:

    Код:
    <META NAME=»msapplication-starturl» CONTENT=»http://www.somesite.ru/start»>

    Разумеется, если указывается интернет-адрес конкретной веб-страницы, слэш ставить не нужно:

    Код:
    <META NAME=»msapplication-starturl» CONTENT=»http://www.somesite.ru/welcome.html»>
  • msapplication-window — задаёт изначальные размеры окна браузера, в котором будет открыт закреплённый веб-сайт. Разумеется, пользователь может потом изменить его размеры. Значение этого параметра указывается в следующем формате:
    Код:
    width=<ширина>;height=<высота>

    <Ширина> и <высота> указываются в виде чисел в пикселах. Минимальное значение <ширины> — 800 пикселов, <высоты> — 600 пикселов.

    Код:
    <META NAME=»msapplication-window» CONTENT=»width=1024;height=768″>

    Если размеры окна не указаны, окно будет иметь размеры по умолчанию.

2.3. Параметры времени выполнения
В отличие от параметров закреплённого сайта времени установки, параметры времени выполнения считываются и обрабатываются каждый раз при открытии веб-страницы. Они определяют цвет окна браузера и набор команд в списке переходов ярлыка, указывающего на закреплённый веб-сайт. Не забываем, что эти параметры имеют смысл только в том случае, если страница принадлежит закреплённому веб-сайту.

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

Список имён и описаний доступных нам параметров времени выполнения приведён ниже.

  • msapplication-navbutton-color — задаёт цвет окна и кнопок Вперёд и Назад. Значение этого параметра должно представлять собой значение цвета, указанное в любом формате, который поддерживается стандартом CSS3. Разработчики Internet Explorer рекомендуют использовать тёмные цвета, чтобы данные кнопки были хорошо заметны.

    Если данный параметр не указан, используется базовый цвет иконки веб-сайта.

    Код:
    <META NAME=»msapplication-navbutton-color» CONTENT=»black»>

    Здесь мы указали для окна и кнопок Вперёд и Назад чёрный цвет.

  • msapplication-task — создаёт одну команду в списке переходов.

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

    Значение этого параметра задаёт данные, необходимые для создания команды, и указывается в следующем формате:

    Код:
    name=<текст надписи пункта контекстного меню, соответствующего команде>;
    action-uri=<интернет-адрес веб-страницы, на которую будет выполнен переход
    при выборе данной команды>;
    icon-uri=<интернет-адрес иконки, которая будет отображаться в пункте
    контекстного меню, левее его надписи>
    [; window-type=<цель>]

    Здесь всё большей частью понятно. Кроме <цели>…

    <Цель> указывает, где будет открыта веб-страница, на которую был выполнен переход. Цель tab указывает, что веб-страница должны быть открыта в новой вкладке текущего окна браузера, цель self — в текущей вкладке, а цель window — в новом окне. Если цель не указана, веб-страница будет открыта в новой вкладке (как если бы мы указали цель tab).

    Примечание:
    Все команды в списке переходов должны иметь уникальные надписи.

    Иконки, которые будут использованы в пунктах контекстного меню ярлыка, соответствующих командам в списке переходов, должны иметь размеры 16х16 пикселов.

    Код:
    <META NAME=»msapplication-task» CONTENT=»name=Справка;
    action-uri=/help.html;icon-uri=/icons/question-mark.ico»>

    Здесь мы создали команду в списке переходов, которая откроет веб-страницу «Справка».

    Код:
    <META NAME=»msapplication-task» CONTENT=»name=Справка;
    action-uri=/help.html;icon-uri=/icons/question-mark.ico;window-type=window»>

    А эта команда откроет ту же веб-страницу в новом окне браузера.

    Если нам нужно создать несколько команд в списке переходов, мы укажем в HTML-коде несколько соответствующих им тегов <META>. Максимальное количество команд, которые можно создать таким образом, — 5.

    Примечание:
    Вообще-то, можно создать сколько угодно команд, но отображаться на экране будут только 5 созданных самыми последними.

    Например, такой HTML-код создаст команды в списке переходов для веб-сайта какого-нибудь интернет-магазина:

    Код:
    <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>
  • msapplication-task-separator — создаёт разделитель между командами в списке переходов. В качестве значения должно быть указано уникальное имя создаваемого разделителя.

    В качестве примера давайте возьмём приведённый выше HTML-код, создающий команды веб-сайта интернет-магазина, и отделим команды Войти и Выйти от остальных разделителями.

    Код:
    <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»>

    Количество создаваемых таким образом разделителей не ограничено.

Напоследок — ещё несколько важных моментов.

Команды в списке переходов, которые мы создали с помощью тегов <META>, остаются неизменными всё время, пока данная веб-страница открыта в окне браузера. Мы не сможем изменить их состав из веб-сценариев. Именно поэтому такие команды называютсястатическими. Все статические команды присутствуют в контекстном меню ярлыка в категории Задачи.

Интересно, что все статические команды, что мы создадим, будут присутствовать в контекстном меню ярлыка даже после того, как окно браузера, где мы открыли закреплённый веб-сайт, будет закрыто. Таким образом, мы можем дать пользователю возможность открыть нужную ему страницу закреплённого веб-сайта напрямую, без открытия начальной страницы и долгого «путешествия» по гиперссылкам.

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

Источник: thevista.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты