Опубликован: 19.07.2010 | Уровень: для всех | Доступ: платный
Самостоятельная работа 1:

Internet Explorer 8 и MS Visual Studio Web Developer 2008 Express

< Лекция 3 || Самостоятельная работа 1: 1234 || Лекция 4 >
Аннотация: Цель работы: знакомство с новыми возможностями веб-браузера Microsoft Internet Explorer 8 в целом и его инструментами разработчика, в частности. Ознакомление с базовыми функциональными возможностями среды веб-разработки Visual Web Developer 2008 Express. Более подробное изучение средств инспектирования кода HTML разметки и отладки CSS стилей в IE8.

Теоретический материал

Internet Explorer 8: новые возможности

Веб-браузер Windows Internet Explorer 8 (сокращенно IE8 ) был выпущен 19 марта 2009 года для Windows XP, Windows Server 2003, Windows Vista и Windows Server 2008.

IE8 поддерживается как 32-битными операционными системами, так и 64-битными, и является браузером по умолчанию для Windows 7 и Windows Server 2008.

Главными приоритетами при разработке этой версии браузера являлись безопасность, простота использования, усовершенствования RSS и CSS, поддержка Ajax.

Среди новых возможностей IE8 можно назвать следующие:

  • Загрузка 64-разрядных версий. IE8 поддерживает загрузку файлов размером свыше 4 ГБ.
  • Ускорители. Ускорители представляют собой расширения браузера и обрабатывают содержимое веб-страниц, отправляя данные в выбранную пользователем службу. Службы выполняют с содержимым определенные действия (например, отправляют его по электронной почте или заносят в "Избранное") или предоставляют дополнительные сведения (находят на карте адрес, переводят текст и т. п.). Пользователи могут устанавливать и применять ускорители из контекстного меню браузера, повышая удобство своей работы ( usability ).
  • Специальные возможности и ARIA. В ответ на повышение сложности пользовательского интерфейса в Интернете группа Web Accessibility Initiative определила план полнофункциональных интернет-приложений со специальными возможностями ( ARIA ), который позволяет авторам веб-сайтов определить доступ к настраиваемым элементам пользовательского интерфейса. В ARIA это реализуется путем определения набора HTML -атрибутов, соответствующих обычным элементам управления пользовательского интерфейса. В результате люди с ограниченными возможностями могут работать с веб-сайтами, используя широкие возможности взаимодействия.
  • Улучшения компонентов ActiveX. В IE8 обеспечивается более эффективное управление установкой и отладкой Microsoft ActiveX:
    • Управление ActiveX для каждого сайта. Почти половина всех элементов управления ActiveX, предназначенных для запуска только на одном сайте, не подразумевают какого-либо метода блокирования сайтов. Это означает, что большое число элементов управления по умолчанию не являются безопасными и могут использоваться на веб-сайтах злоумышленников. Во избежание этого в IE8 пользователь может задать выполнение элементов управления ActiveX в зависимости от сайта.
    • Установка без прав администратора. Обычные пользователи (не имеющие прав администратора) могут устанавливать элементы управления ActiveX в своих профилях без предупреждений UAC или привлечения администратора. Если пользователь устанавливает вредоносный элемент ActiveX, поражается только профиль этого пользователя, а система остается в безопасности.
    • Ведение журнала ActiveX. IE8 может передавать отчеты об основных сбоях установки и создания экземпляров, например, когда из-за ограничений безопасности не удается правильно создать экземпляр элемента управления ActiveX.
  • Усовершенствования в AJAX. Платформа AJAX меняет способ создания веб-приложений. В Internet Explorer 8 предусмотрены новые функции объекта XMLHttpRequest, поддерживающего приложения AJAX.
  • Соответствие CSS. Internet Explorer 8 полностью поддерживает CSS 2.1 и более полно поддерживает CSS 3.
  • Средства для разработчиков. Встроенные средства разработчика IE8 позволяют работать с внутренними элементами веб-страниц для анализа и устранения проблем, касающихся HTML, каскадных таблиц стилей и сценариев:
    • Инструмент CSS. Отображает разные правила, определенные в таблицах стилей, загруженных веб-страницей.
    • Отладка сценариев. Встроенный упрощенный отладчик позволяет устанавливать точки останова и пошагово выполнять клиентский сценарий, не выходя из Internet Explorer.
    • Профили сценариев. Наглядное представление работы сценариев с указанием этапов, на которые тратится больше всего времени.
    • Переключение режимов версий. Переключение между различными режимами браузера для проверки на соответствие стандартам.
  • Режим совместимости документов. При создании IE8 были приложены значительные усилия для создания нового механизма форматирования с полной поддержкой CSS 2.1, поддержкой HTML 5, а также с исправлениями взаимодействия в модели DOM. Наивысший уровень поддержки стандартов включен по умолчанию для сайтов, на которых указан строгий атрибут !DOCTYPE. Авторы веб-сайтов могут выбрать наивысшую совместимость с Internet Explorer 7 с помощью следующего тега meta:

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

    Вместо кнопки эмуляции режима IE7, которая была в первой бета-версии IE8, появилась кнопка представления совместимости


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

  • Хранилище DOM. Возможность хранить крупные объемы данных непосредственно на жестком диске компьютера пользователя важна для веб-приложений, работа которых не ограничивается взаимодействием между клиентом и сервером. Локальное хранилище очень удобно при потере подключения к Интернету; можно синхронизировать локальные изменения при восстановлении подключения. При изменении состояния подключения срабатывают события работы в сети и вне сети. Для этих событий поддерживаются сценарии.
  • Улучшения в HTML и DHTML. В IE 8 улучшена поддержка HTML 4.01 и 5, а также DOM 2 и 3.
  • Изменяемые прототипы DOM. В новой версии в JScript предусмотрен способ переопределения существующих методов объекта и создания новых методов для мгновенного применения ко всем экземплярам объектов. Эта привязка дает возможность управлять объектами DOM так, как если бы они были объектами JScript. За счет предоставления встроенных прототипов DOM для элементов ядро JScript может напрямую управлять циклическими ссылками, которые иногда возникают между инфраструктурой компонентно-объектной модели (COM) Internet Explorer и механизмом сценариев. Это позволяет устранять ошибки утечки памяти, которые непросто обнаружить.
  • Улучшения защищенного режима. В IE8 приложения со средним уровнем безопасности могут использовать файлы Cookie с низким уровнем безопасности без оповещения пользователя с помощью функций IEGetProtectedModeCookie и IESetProtectedModeCookie. Как обычно, приложения, в которых используются файлы Cookie, загруженные из Интернета, должны полагать, что такие файлы содержат вредоносные данные.
  • Функции RSS
    • Каналы с проверкой подлинности. Теперь RSS -платформа Windows может выполнять проверку подлинности без взаимодействия с пользователем. Имя пользователя и пароль можно указать в окне свойств канала.
    • Эффективный идентификатор. Для создания уникального идентификатора элементов каналов используется алгоритм хэширования. Это значение можно использовать для синхронизации состояния элемента (прочтен или не прочтен) между компьютерами или для сравнения элементов в общем списке каналов с элементами, которые были сохранены другими программами.
  • Поставщики поиска. В IE8 поиск реализован существенно удобнее по сравнению с IE7 благодаря следующим функциям:
    • Поставщики поиска. Пользователи могут ввести нужный поисковый запрос намного быстрее. Поддерживается формат JSON и расширенный формат OpenSearch XML.
    • Визуальные подсказки поиска. Интегрированный поиск рисунков и другого наглядного содержимого.
    • Улучшенный пользовательский интерфейс. С помощью раскрывающегося списка быстрого выбора и контекстного меню ускорителей можно легко выбирать установленные поставщики поиска и переключаться между ними. Кроме того, с помощью поиска в журнале, можно автоматически находить недавно просмотренные веб-страницы, не закрывая окна поиска.
  • Безопасность и конфиденциальность. Следующие функции делают работу в Интернет безопаснее:
    • Защита от фальшивых кнопок. Иногда злоумышленники пытаются обмануть пользователей, размещая на сайтах кнопки, которые якобы выполняют безопасные или безвредные функции, но на самом деле выполняют посторонние задачи. Для этого злоумышленники внедряют вредоносный код или "переоформляют" пользовательский интерфейс с помощью прозрачных фреймов, которые закрывают определенные элементы пользовательского интерфейса фальшивым текстом и изображениями. Чтобы бороться с таким видом мошенничества, владельцы веб-сайтов могут отправлять заголовок отклика HTTP с именем X-Frame-Options вместе с HTML -страницами для защиты от подмены интерфейса страницы.

      X-Frame-Options: Deny

      Если значение X-Frame-Options содержит маркер Deny, то IE8 запрещает отображение страницы, если она содержится внутри фрейма. Если значение содержит маркер SameOrigin, то IE8 не будет отображать страницу, если контекст просмотра верхнего уровня отличается от источника страницы, содержащей эту директиву. Вместо заблокированных страниц отображается страница с сообщением об ошибке "Это содержимое невозможно отобразить во фрейме".

    • Фильтр межсайтовых сценариев ( XSS ). Эта новая функция браузера IE8 блокирует уязвимости "отраженного" XSS (тип I). Сценарий может быть "отражен", когда часть HTTP -запроса используется для формирования отклика сервера, из-за чего вредоносный сценарий в запросе запускается с таким же уровнем доступа, как и остальная страница. Фильтр XSS отслеживает все запросы и отклики в браузере. Когда фильтр обнаруживает сценарий в межсайтовом запросе, он анализирует сценарий и отключает его, если он повторяется в отклике сервера. В этом случае отображается сообщение "Эта страница была изменена для предотвращения возможной атаки с использованием межсайтовых сценариев". Веб-разработчики, желающие отключить этот фильтр для своего содержимого, могут использовать следующий заголовок HTTP:
      X-XSS-Protection: 0
    • Удаление журнала браузера: когда пользователь работает в Интернет, браузер Internet Explorer сохраняет выбранные пользователем параметры, введенные данные и сведения о посещенных страницах. Некоторые расширения могут делать то же самое. Ранее надстройки не могли получить сведений о том, очистил ли пользователь папку временных файлов Интернета, удалил ли он файлы Cookie и журнал. Теперь, путем реализации интерфейса IDeleteBrowsingHistory можно уведомлять расширения при очистке пользователем кэша браузера - в этом случае расширения смогут одновременно удалить собственные сохраненные данные.
    • Фильтрация InPrivate: веб-сайты могут отслеживать пользователей без использования файлов Cookie. В IE8 можно гарантировать конфиденциальность данных путем блокировки обмена данными со сторонним содержимым (изображениями и сценариями с других веб-сайтов, встроенных в просматриваемую веб-страницу). Фильтрация InPrivate отслеживает сторонние элементы и может автоматически (если этот режим включен пользователем) блокировать веб-сайты, предоставившие стороннее содержимое более чем для 10-30 сайтов.
  • API-интерфейс Selectors. С помощью селекторов CSS можно быстро находить элементы DOM. Встроенный API -интерфейс Selectors обеспечивает значительно более высокую производительность по сравнению с реализациями в других средах.
  • Веб-фрагменты. Дают пользователям возможность подписываться на особым образом помеченные фрагменты веб-страниц. При изменении содержимого пользователь получает уведомление на панели избранного, где можно просмотреть изменившееся содержимое без перехода на данную страницу.
  • Изменение масштаба. В IE8 улучшено качество изменения масштаба, эта функция стала удобнее по сравнению с IE7. Кроме того, в IE8 упразднена горизонтальная линейка прокрутки для большинства основных видов работы. Новые окна (в том числе диалоговые и всплывающие) автоматически наследуют масштаб родительского окна.

Developer Tools (средства разработчика) в IE8: обзор возможностей

Для повышения производительности труда разработчиков в состав IE8 включены мощные, но при этом простые в использовании средства разработчика, обладающие целым рядом преимуществ.

  • Простые в использовании интегрированные средства разработчика. Cредства разработчика встроены непосредственно в IE8, что дает возможность отлаживать код на любом компьютере, на котором установлен браузер IE8. Кроме того, средства разработчика загружаются, только когда они необходимы, и при этом они не снижают производительность работы браузера.
  • Наглядный графический интерфейс. Вместо реконструирования кода сайта или изменения сайта для вывода данных отладки можно использовать отображение сайта в браузере Internet Explorer. При этом ускоряется отладка динамических сайтов, где просмотра исходного кода недостаточно, а также упрощается разбор кода, специфичного для Internet Explorer, поскольку в этих случаях использовать обычные средства разработки невозможно.
  • При создании нового дизайна или при тестировании исправлений в предыдущих версиях Internet Explorer приходится редактировать код, сохранять его, обновлять страницу в браузере и повторять эту процедуру. Средства разработчика Internet Explorer 8 упрощают работу в таких случаях: можно редактировать код сайта прямо в браузере; все изменения немедленно вступают в силу.
  • Оптимизация производительности приложений. При выявлении и устранении неполадок производительности обычно используется поэтапный подход, при котором все ситуации рассматриваются по очереди. С помощью профилировщика сценариев в средствах разработчика IE8 можно собирать статистические данные, такие как время выполнения и количество вызовов той или иной функции JScript, при тестировании приложения и использовать отчет, чтобы быстро обнаруживать и устранять основные причины замедления.

Для начала работы со средствами разработчика нажмите клавишу <F12> или выберите в меню "Сервис" команду "Средства разработчика".

Активирование "Средств разработчика" в IE8

Рис. 4.1. Активирование "Средств разработчика" в IE8

После открытия средства отображаются в собственном окне, каждому из них соответствует отдельная вкладка в Internet Explorer.

Вид панели "Средства разработчика"

Рис. 4.2. Вид панели "Средства разработчика"

Рассмотрим вкратце назначение и основные возможности каждого из средств представленных вкладками.

< Лекция 3 || Самостоятельная работа 1: 1234 || Лекция 4 >
Наталья Алмаева
Наталья Алмаева
Россия
Андрей Лучицкий
Андрей Лучицкий
Россия