Технологии Microsoft для создания RIA-приложений

Internet Explorer 9. Pinned Sites

Разбить на страницы
Показывать лекцию целиком

Pinned sites. Для обычных пользователей

Pinned sites ( прикрепленные сайты ) - это набор функций Internet Explorer 9 для интеграции с рабочим столом Windows 7. Pinned Sites можно добавлять как на панель задач, так и на рабочий стол, и в меню Пуск. В данной части практики

Функциональная структура Pinned Site представлена ниже:

(рис 17.1)

Прикрепленный сайт создается достаточно просто:

1.Запустим браузер IE 9 и введем, к примеру, сайт " http://www.bing.com/ ":

(рис 17.2)

2.Создадим, прикрепленную ссылку, на панели задач. Для этого выберем иконку в адресной строке и зажмем левую кнопку мыши:

(рис 17.3)

И протянем иконку до панели задач, не отпуская кнопку мыши:

(рис 17.4)

Отпустим кнопку мыши, в результате создастся вкладка на панели задач:

(рис 17.5)

Теперь можно открывать сайт, с панели задач используя JumpList. Для этого нужно щелкнуть правой кнопкой мыши на иконке на панели задач:

(рис 17.6)

Внутри JumpList меню состоит из нескольких блоков:

  • Системные команды. Включает закрытие окна, привязку и отвязку приложения, стартовую ссылку приложения. Вы можете задать как саму ссылку, так и текст названия и иконку.
  • Браузерные команды. Доступна только одна команда — открыть сайт в приватном режиме.
  • Задачи. Ссылки на основные разделы сайта или важные ресурсы, к которым вы хотите предоставить пользователям наиболее быстрый доступ. Вы можете задать до 5 команд.
  • Категории. Ссылки на дополнительные разделы или ресурсы сайта, могут динамически обновляться средствами JavaScript. Вы можете задать только одну категорию, а в ней до 20 ссылок.
    •

    Так же можно запускать сайты, кликнув по иконке на панели задач левой кнопкой мыши:

    (рис 17.7)

    3.Создадим, теперь, прикрепленный сайт на рабочем столе. Для этого запустим браузер IE 9 и введем, к примеру, сайт "http://twitter.com/":

    (рис 17.8)

    Выберем иконку в адресной строке и зажмем левую кнопку мыши:

    (рис 17.9)

    Протянем иконку на рабочий стол и отпустим кнопку мыши:

    (рис 17.10)

    В результате создастся ярлык на рабочем столе:

    (рис 17.11)

    Запустим ярлык. В результате откроется браузер с сайтом "twitter.com"

    (рис 17.12)

    И на панели задач сайт будет отображаться отдельной иконкой:

    (рис 17.13)

    4.Создадим, теперь, прикрепленный сайт в меню пуск. Для этого запустим браузер IE 9 и введем, к примеру, сайт "http://microsoft.com/. " нажмем кнопку ALT, и перейдем во вкладку Сервис. Там выберем пункт в меню "Добавить сайт в меню Пуск":

    (рис 17.14)

    Появится диалоговое окно:

    (рис 17.15)

    Нажмем кнопку "Добавить". Прикрепленный сайт создастся в меню Пуск - > Все программы:

    (рис 17.16)

    Pinned sites. Для разработчиков

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

    1.Создадим пустой сайт ( Empty Site ) в WebMatrix на основе шаблона. И назовем его: "PinnedSites":

    (рис 17.17)

    2.Перейдем в рабочее пространство "Файлы" и создадим новый файл:

    (рис 17.18)

    3.Выберем из списка HTML и назовем файл Default.html:

    (рис 17.19)

    4.Создадим папку в проекте и назовем её "images":

    (рис 17.20)

    5.Добавим в созданную папку файлы с расширением ):

    (рис 17.21)

    6.Заменим исходный код страницы Default.html на:

    <!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
     <title>Прикрепленные сайты</title>
    <meta name="application-name" content="Прикрепленные сайты пример" />
    <meta name="msapplication-tooltip" content="Пример Pinned Sites" />
    <meta name="msapplication-starturl" content="http://localhost:51363/Default.html" />
    <meta name="msapplication-window" content="width=800; height=600;" />
    <meta name="msapplication-navbutton-color" content="green" />
    <link rel="Shortcut Icon" type="image/ico" href="images/K001.ico" />
        </head>
    <body>
    </body>
</html>

    Параметр application-name - название приложения, которое используется при именовании иконки приложения и в качестве названия стартовой ссылки в меню JumpList:

    (рис 17.22)

    Параметр msapplication-tooltip – подсказка, которая показывается при наведении мыши на иконку в файловой системе и в меню "Пуск":

    (рис 17.23)

    Параметр msapplication-starturl - стартовая страница. Эта страница открывается при клике на иконку приложения:

    (рис 17.24)

    Параметр msapplication-window - начальный размер окна. Для закрепленного сайта можно установить начальный размер окна браузера, в котором он будет открываться. Если пользователь самостоятельно изменит размеры окна, запомнится именно его выбор.

    Параметр msapplication-navbutton-color - цвет кнопок. Для задания цвета можно использовать как именованные значения, так и шестнадцатеричные:

    (рис 17.25)

    Для использования нужной иконки используется следующий код:

    <link rel="Shortcut Icon" type="image/ico" href="images/K001.ico" />

    Для сайта необходимо создать несколько иконок разного размера:

  • 16х16 - используется в адресной строке, на вкладке, и рядом со ссылкой на стартовую страницу в меню ):(рис 17.26) (рис 17.27)
  • 24x24 — используется слева от кнопок, если не задана, то иконка масштабируется:(рис 17.28)
  • 32х32 — используется в панели задач:(рис 17.29)
  • 48х48 и выше — используется в файловой системе (рабочий стол, проводник):(рис 17.30)

    • Дополнительные материалы

    Более подробно по функциям Pinned Sites можно прочитать по ссылкам:

  • http://msdn.microsoft.com/en-us/library/gg131029(v=vs.85).aspx
  • http://blogs.msdn.com/b/kichinsky/archive/2010/10/04/internet-explorer-9-pinned-sites.aspx
    •
    Страницы:

    Pinned sites. Для обычных пользователей

    Pinned sites ( прикрепленные сайты ) - это набор функций Internet Explorer 9 для интеграции с рабочим столом Windows 7. Pinned Sites можно добавлять как на панель задач, так и на рабочий стол, и в меню Пуск. В данной части практики

    Функциональная структура Pinned Site представлена ниже:

    (рис 17.1)

    Прикрепленный сайт создается достаточно просто:

    1.Запустим браузер IE 9 и введем, к примеру, сайт " http://www.bing.com/ ":

    (рис 17.2)

    2.Создадим, прикрепленную ссылку, на панели задач. Для этого выберем иконку в адресной строке и зажмем левую кнопку мыши:

    (рис 17.3)

    И протянем иконку до панели задач, не отпуская кнопку мыши:

    (рис 17.4)

    Отпустим кнопку мыши, в результате создастся вкладка на панели задач:

    (рис 17.5)

    Теперь можно открывать сайт, с панели задач используя JumpList. Для этого нужно щелкнуть правой кнопкой мыши на иконке на панели задач:

    (рис 17.6)

    Внутри JumpList меню состоит из нескольких блоков:

  • Системные команды. Включает закрытие окна, привязку и отвязку приложения, стартовую ссылку приложения. Вы можете задать как саму ссылку, так и текст названия и иконку.
  • Браузерные команды. Доступна только одна команда — открыть сайт в приватном режиме.
  • Задачи. Ссылки на основные разделы сайта или важные ресурсы, к которым вы хотите предоставить пользователям наиболее быстрый доступ. Вы можете задать до 5 команд.
  • Категории. Ссылки на дополнительные разделы или ресурсы сайта, могут динамически обновляться средствами JavaScript. Вы можете задать только одну категорию, а в ней до 20 ссылок.
    •

    Так же можно запускать сайты, кликнув по иконке на панели задач левой кнопкой мыши:

    (рис 17.7)

    3.Создадим, теперь, прикрепленный сайт на рабочем столе. Для этого запустим браузер IE 9 и введем, к примеру, сайт "http://twitter.com/":

    (рис 17.8)

    Выберем иконку в адресной строке и зажмем левую кнопку мыши:

    (рис 17.9)

    Протянем иконку на рабочий стол и отпустим кнопку мыши:

    (рис 17.10)

    В результате создастся ярлык на рабочем столе:

    (рис 17.11)

    Запустим ярлык. В результате откроется браузер с сайтом "twitter.com"

    (рис 17.12)

    И на панели задач сайт будет отображаться отдельной иконкой:

    (рис 17.13)

    4.Создадим, теперь, прикрепленный сайт в меню пуск. Для этого запустим браузер IE 9 и введем, к примеру, сайт "http://microsoft.com/. " нажмем кнопку ALT, и перейдем во вкладку Сервис. Там выберем пункт в меню "Добавить сайт в меню Пуск":

    (рис 17.14)

    Появится диалоговое окно:

    (рис 17.15)

    Нажмем кнопку "Добавить". Прикрепленный сайт создастся в меню Пуск - > Все программы:

    (рис 17.16)

    Pinned sites. Для разработчиков

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

    1.Создадим пустой сайт ( Empty Site ) в WebMatrix на основе шаблона. И назовем его: "PinnedSites":

    (рис 17.17)

    2.Перейдем в рабочее пространство "Файлы" и создадим новый файл:

    (рис 17.18)

    3.Выберем из списка HTML и назовем файл Default.html:

    (рис 17.19)

    4.Создадим папку в проекте и назовем её "images":

    (рис 17.20)

    5.Добавим в созданную папку файлы с расширением ):

    (рис 17.21)

    6.Заменим исходный код страницы Default.html на:

    <!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
     <title>Прикрепленные сайты</title>
    <meta name="application-name" content="Прикрепленные сайты пример" />
    <meta name="msapplication-tooltip" content="Пример Pinned Sites" />
    <meta name="msapplication-starturl" content="http://localhost:51363/Default.html" />
    <meta name="msapplication-window" content="width=800; height=600;" />
    <meta name="msapplication-navbutton-color" content="green" />
    <link rel="Shortcut Icon" type="image/ico" href="images/K001.ico" />
        </head>
    <body>
    </body>
</html>

    Параметр application-name - название приложения, которое используется при именовании иконки приложения и в качестве названия стартовой ссылки в меню JumpList:

    (рис 17.22)

    Параметр msapplication-tooltip – подсказка, которая показывается при наведении мыши на иконку в файловой системе и в меню "Пуск":

    (рис 17.23)

    Параметр msapplication-starturl - стартовая страница. Эта страница открывается при клике на иконку приложения:

    (рис 17.24)

    Параметр msapplication-window - начальный размер окна. Для закрепленного сайта можно установить начальный размер окна браузера, в котором он будет открываться. Если пользователь самостоятельно изменит размеры окна, запомнится именно его выбор.

    Параметр msapplication-navbutton-color - цвет кнопок. Для задания цвета можно использовать как именованные значения, так и шестнадцатеричные:

    (рис 17.25)

    Для использования нужной иконки используется следующий код:

    <link rel="Shortcut Icon" type="image/ico" href="images/K001.ico" />

    Для сайта необходимо создать несколько иконок разного размера:

  • 16х16 - используется в адресной строке, на вкладке, и рядом со ссылкой на стартовую страницу в меню ):(рис 17.26) (рис 17.27)
  • 24x24 — используется слева от кнопок, если не задана, то иконка масштабируется:(рис 17.28)
  • 32х32 — используется в панели задач:(рис 17.29)
  • 48х48 и выше — используется в файловой системе (рабочий стол, проводник):(рис 17.30)

    • Дополнительные материалы

    Более подробно по функциям Pinned Sites можно прочитать по ссылкам:

  • http://msdn.microsoft.com/en-us/library/gg131029(v=vs.85).aspx
  • http://blogs.msdn.com/b/kichinsky/archive/2010/10/04/internet-explorer-9-pinned-sites.aspx
    •
    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^