Проектирование и разработка веб-приложений на основе технологий Microsoft

IE8 для разработчиков

Показывать лекцию целиком

Стандарты и обеспечение совместимости

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

Для обеспечения совместимости с предыдущими версиями Internet Explorer был реализован новый, встроенный в Internet Explorer 8, механизм, позволяющий эмулировать поведение предыдущих версий браузера как для отдельных страниц, так и для веб-приложений и внутренних и внешних сайтов.

Указать на совместимость с Internet Explorer 8 можно несколькими способами, используя для этого специальный META -тэг:

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

Данный META -тэг указывает на то, что сайт всегда должен запускаться в режиме поддержки (эмуляции) Internet Explorer 7.

Добавить данный META -тэг можно несколькими способами, которые мы рассмотрим ниже.

Задание режима совместимости в HTML-коде

Для задания режима совместимости на стороне клиента в HTML-коде страниц следует, используя любой HTML-редактор, вручную добавить соответствующий тэг ко всем страницам сайта, расположив его внутри элемента HEAD перед всеми остальными тэгами кроме TITLE и META.

<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<!-Здесь располагаются другие тэги группы HEAD --> </head>

Задание режима совместимости на стороне сервера

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

Можно добавить специальный HTTP-заголовок, используя средство управления веб-сервером Internet Information Services — IIS Manager. Этот заголовок может быть добавлен как для отдельного сайта, расположенного на сервере (site-wide), так и для всех сайтов (server-wide). Для этого следует выполнить следующие шаги:

  • Выполнить команду Start | Administrative Tools | Internet Information Services (IIS) Manager.
  • Раскрыть вкладку Connections и выбрать сайт, для которого будет добавлен дополнительный HTTP-заголовок.
  • В панели утилит выбрать иконку HTTP Response Headers и дважды щелкнуть по ней мышью.
  • В панели Actions выбрать команду Add.
  • В панели Add Custom HTTP Response Header добавить в поле Name значение X-UA-Compatible, а в поле Value — значение IE=EmulateIE7.
  • Щелкнуть кнопку Ok для сохранения изменений.
  • Аналогичные действия можно выполнить и из утилиты командной строки. Для этого в каталоге %systemroot%\system32\inetsrv следует выполнить следующую команду:

    appcmd.exe set config -section:systern.webServer/httpProtocol
    /+"custornHeaders.[narne='X-UA-Compatible'.
    value=' IE=EmulateIE7']" /cornrnit:apphost

    Также можно сконфигурировать веб-сервер, изменив содержимое конфигурационного файла Web.config или applicationhost.config следующим образом:

    <?xrnl version="1.0" encoding="utf-8"?> <configuration>
    <syster.webServer> <httpProtocol> <custorHeaders> <clear />
    <add narne="X-UA-Compatible" value="IE=EmulateIE7" />
    </customHeaders> </httpProtocol> </system.webServer> </configuration>

    После этого поместите измененный конфигурационный файл Web.config в корневой каталог вашего веб-сайта. Отметим, что при использовании решения на серверной стороне не нужно включать META -тэг в HTML-код страниц — он будет вставляться автоматически.

    Режимы совместимости

    Описанное выше значение META -тэга X-UA-Compatible "IE=EmulateIE7" является одним из нескольких распознаваемых Internet Explorer 8. В следующей таблице показаны все возможные значения элемента IE.

    Значение Описание
    IE=5 Режим работы, в котором имитируются особенности

    и ошибки конкурирующих или старых версий

    браузеров

    IE=7 Всегда использовать режим IE7
    IE=EmulateIE7 Отображать в режиме IE7 за исключением сайтов,

    у которых режим "Quirks" задан через элемент DOCTYPE

    IE=8 Всегда использовать режим IE8
    IE=EmulateIE8 Использовать данное значение для отмены режима

    Расширения объекта Event

    Для поддержки технологии AJAX Internet Explorer содержит ряд новых возможностей, в число которых входит упомянутая выше технология Cross Document Messaging (XDM). В частности, добавление новых свойств в объекте Event может привести к неверному выполнению кода.

    Встроенные средства разработки

    В предыдущей версии Internet Explorer разработчики могли установить бесплатный дополнительный компонент — Developer Toolbar, который многие использовали в качестве средства для тестирования, отладки, профилирования и даже быстрого создания прототипов веб-страниц. Из-за того, что Developer Toolbar поставлялся в виде расширения, производительность этого компонента была довольно низкой, а для работы требовался большой объем памяти.

    В Internet Explorer 8 компонент Developer Toolbar заменен на интегрированный набор средств разработки, которые доступны по нажатию клавиши F12 или по команде Tools | Developer Tools. Так как средства для разработки интегрированы в браузер, они более производительны, не требуют дополнительной памяти и позволяют не покидая браузера выполнять основные задачи по тестированию, отладке и профилированию широкого спектра веб-сайтов и веб-приложений.

    К основным возможностям, предоставляемым интегрированными средствами разработки, можно отнести следующие:

  • Редактирование и отладка HTML и CSS.
  • Тестирование и отладка сценариев.
  • Профилирование сценариев.
  • Просмотр или изменение DOM-модели.
  • Все эти операции выполняются в визуальной среде, которая отображает внутреннее представление страницы в веб-браузере, а не просто исходный код страницы. Таким образом, разработчики могут вносить изменения в код страниц и незамедлительно видеть результат своих действий. После того как необходимые операции выполнены, их результаты — в виде дерева HTML-элементов или обновленных CSS-стилей — могут быть сохранены на диске в виде текстовых файлов для последующего включения в оригинальный код страницы.

    Инструменты для разработчика - Developer Tools - требуются для быстрой проверки кода страницы на его валидность (соответствие веб-стандартам, отсутствие ошибок в синтаксисе), а также для отладки различных сценариев (в основном, из-за распространения AJAX в современном сайтостроительстве это отладка JavaScript) и отображения стилей (CSS, отдельные цвета, шрифты и графика). При этом важно, чтобы данные инструменты были встроены в сам браузер, а не представляли собой отдельное приложение (веб-мастер при серфинге сможет увидеть ошибки или изменения и оперативно исправить их). В IE длительное время не было подобного инструмента, пока в 2007 году не появился отдельный тулбар для разработчиков (IE Developer Toolbar). С его помощью можно было разбирать код страницы (DOM), "на лету" проверять корректность HTML, CSS, RSS, включать отображение линеек масштаба для последующей верстки страниц и многое другое. Кроме этого тулбара, под IE были выпущены еще ряд инструментов – инспектор кода IEWatch, отладчики DebugBar и Fiddler, средства для работы со скриптовыми технологиями Ajaxview и Visual Web Developer Express. Однако в большинстве своем это были решения от сторонних разработчиков браузера, а фирменная панель IE Developer Toolbar иногда замедляла быстродействие браузера.

    Состав Developer Tools

    Запуск встроенного в IE8 инструмента веб-разработки осуществляется или через меню (Сервис – Средства разработчика), или с помощью горячей клавиши F12. В отдельном окне откроется двухпанельный редактор. В левой части будет отображаться DOM-структура сайта (секции head, body), а справа – расширенное содержание выбранного фрагмента кода. Developer Tools поддерживает работу по инспекции и отладке HTML, CSS, JavaScript, а также просмотр cookies и кеша браузера.

    (рис 25.1)

    Developer Tools поддерживает работу по инспекции и отладке HTML, CSS, JavaScript, а также просмотр cookies и кеша браузера.

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

    (рис 25.2)

    Developer Tools можно "прикреплять" к инспектируемой странице

    Developer Tools открываются под каждую открытую в IE8 страницу, поэтому, чтобы не загромождать экран окнами средств разработчика, их можно закреплять (команда Ctrl+P или нажатие на пиктограмму под кнопкой закрытия окна). В этом случае окно будет располагаться во вкладке редактируемой страницы в виде панели.

    Работа с инструментом строится по классической схеме – пользователю нужно выделить фрагмент страницы или участок ее кода, который автоматически будет подсвечен согласно правилам синтаксиса HTML/CSS. Внесение изменений осуществляется простой правкой кода или установкой других значений атрибутов, после чего требуется нажать клавишу Enter. Отмена всех изменений производится или обновлением страницы, или нажатием на кнопку ESC, если требуется отменять правки по частям.

    Инспектирование HTML и CSS

    После загрузки DOM-структуры сайта пользователь увидит древовидный список структуры тегов на левой панели. Справа же отображаются связанные с ними, соответственно, стили и атрибуты CSS. Например, при выборе в странице тега <div> можно увидеть связанные с таблицей классы CSS и отследить вызываемые параметры цветов, шрифтов, полей, отступов и так далее. Здесь же в разделе "раскладка" (Layout) будет показано расположение этого элемента на площади страницы с указанием размеров в пикселях и пропорций. Естественно, его можно изменять непосредственно на этой вкладке. В атрибутах отображается список всех зависимостей HTML-кода на странице; к ним можно добавлять собственные из выпадающего списка.

    (рис 25.3)

    Помимо отображения в рамках Developer Tools, расположение HTML-элементов можно увидеть и на самой оригинальной странице

    Помимо отображения в рамках Developer Tools, расположение HTML-элементов можно увидеть и на самой оригинальной странице. Для этого следует указать в меню "Как векторные" (Outline) показ соответствующих фрагментов – ячеек таблицы, таблиц, элементов DIV-верстки, границ рисунков в относительных, абсолютных, постоянных и перемещенных границах. В результате на странице они будут размечены тонкими зелеными линиями.

    (рис 25.4)

    Developer Tools позволяет настраивать каскадные стили в режиме реального времени

    Аналогичным образом реализована и работа с инспектором каскадных стилей. Пользователь в одноименной вкладке выбирает нужный шаблон, описывающий оформление страницы, после чего в левой части окна появляется иерархический список всех атрибутов. Отключение/включение производится простой установкой или снятием галочки на соответствующем пункте. Заметим, что, если на странице вызываются несколько шаблонов CSS, то в списке на первом месте по умолчанию появится тот, который подгружается самым первым.

    Отлаживаем сценарии

    Developer Tools может использоваться также и как отладчик JavaScript. Для его запуска нужно перейти во вкладку "Сценарий" (Script) и нажать на кнопку Start Debugging. В результате произойдет перезагрузка текущей страницы в открытой вкладке (если в настройках браузера запрещена отладка скриптов), а Developer Tools "открепятся" от нижней части экрана. Остановка процесса отладки производится по нажатию на клавиатурное сочетание Shift+F5.

    (рис 25.5)

    Консоль JavaScript-кода может отслеживать вызов тех или иных переменных, выражений и стеков вызовов

    В ходе процесса возможна установка контрольных точек автоматической остановки выполнения – для этого нужно выделить нужное место в коде скрипта, после чего нажать на кнопку F9. Есть также и запуск отладчика с пропуском ошибок исполнения (во избежание остановок) – для этого можно или щелкнуть по кнопке "Остановка при ошибке" или же продублировать это действие командой Ctrl+Shift+E. Кроме того, в случае, если установленная контрольная точка становится неактуальной (код на странице поменялся, указан неправильный путь до сценария и так далее), то в отладчике можно задать условия, при которых будет выполняться остановка (устанавливается в свойствах точки остановки). Наконец, в случае, когда выполнение сценария приостановлено, пользователь может вручную продолжить работу отладчика (кнопка F5), остановить процесс (Ctrl+Shift+B), перейти на следующий этап (F11) или предыдущий шаг (F10), повторить последний цикл скрипта до текущего состояния (Shift+F11).

    Консоль JavaScript-кода может отслеживать вызов тех или иных переменных, выражений и стеков вызовов. Все полученные результаты могут протоколироваться. Еще одна полезная для веб-разработчика функция в Developer Tools связана с измерением производительности JavaScript на страницах. Под страницу могут создаваться специальные профили, которые показывают, какое количество времени было затрачено на исполнение того или иного сценария, а также число вызовов его при открытии страницы. Соответственно, под каждый сеанс будут создавать соответствующие отчеты, которые можно экспортировать в CSV-файл. Помимо этого, профили можно сохранять для сравнения между разными версиями кода.

    Заметим, что функция профилирования JavaScript добавляет к функциональности отладчика возможность оптимизации кода. Иными словами, Developer Tools содержат инструмент, позволяющий выявить "узкие места" в веб-приложениях – обычно это наиболее часто используемые скрипты. Для этого вебмастеру необходимо инициировать процесс профилирования, чтобы увидеть скорость обработки сценариев. Результат будет представлен в виде списка последовательных вызовов скрипта или отдельных его функций. Чтобы увидеть URL, который относится к данному фрагменту и строку на странице, в IE8 должен быть включен отладчик сценариев.

    Другие возможности Developer Tools

    При создании средств разработчика в IE8 Microsoft учла современные требования к подобным инструментам. В частности, особое внимание было уделено к юзабилити решения. Так, в Developer Tools поддерживается полнотекстовый поиск фрагментов HTML (окно поиска расположено в верхнем правом углу окна), а также быстрый поиск всех вхождений тега на основе совместимых с W3C-стандартами селекторов (например, "@table"). Просмотр с помощью Developer Tools включен в контекстное меню IE8 (до этого просмотр кода страницы обычно открывался по умолчанию в "Блокноте" Windows). Сами средства разработчика, несмотря на такое присутствие функций, не "подвисают" – в Microsoft учли проблемы предшественника этого решения IE Developer Toolbar, который загружал в память сразу все модули, чем снижал производительность веб-обозревателя в целом. В Developer Tools модули подгружаются по мере необходимости и под конкретную страницу, не затрагивая производительность IE8 на других открытых вкладках.

    Среди прочих возможностей Developer Tools есть расширенные инструменты работы с рисунками (показ путей, размеров, отчетов об изображениях, блокировка их на странице), ссылками на странице (генерация отчета обо всех внешних и внутренних гиперссылках с их атрибутами), кешем браузера (просмотр и удаление cookies сайта или страницы, политика обновления кеша обозревателя для страницы или всего домена), а также полезные для верстальщика линейка масштаба, палитра цветов и подгонка страницы по определенное разрешение (есть предустановки под стандартные 800*600 и 1024*768 пикселей и возможность задать свой произвольный размер). Кроме того, рядом расположен переключатель отображения веб-документа под разные версии IE – режим совместимости с IE7/IE8, а также более старшими билдами браузера.

    Developer Tools являются удобным и эффективным инструментом для решения повседневных задач вебмастера. В отличие от плагинов, которые загружают дополнительно не без того ресурсоемкий процесс любого браузера (этим особенно отличаются браузеры на движке Gecko, работающие под Windows), решение от Microsoft выглядит достойной и современной альтернативой.

    Создание ускорителей (Accelerators)

    Механизм ускорителей, реализованный в Internet Explorer 8, позволяет автоматизировать использование веб-сервисов, предоставляемых веб-приложениями и сайтами, сделать его более простым и удобным. До появления этого механизма использование веб-сервисов заключалось в передаче данных через буфер обмена данными и состояло из следующих шагов:

  • Выделение текста на экране.
  • Копирование текста.
  • Переход на страницу, содержащую сервис.
  • Подключение к сервису (опционально, при использовании платного сервиса).
  • Вставка текста.
  • Выполнение сервиса.
  • Унификация механизма обращения к веб-сервисам, реализованная в Internet Explorer 8, позволяет отказаться от ручного ввода данных и вызова веб-сервисов — механизм ускорителей предоставляет пользователям контекстное меню для быстрого вызова веб-сервисов непосредственно в контексте основной страницы, не покидая ее.

    Пользователи могут использовать стандартные ускорители, входящие в состав Internet Explorer 8, или загрузить дополнительные из галереи дополнений (http://ieaddons.com/ru/) или с любого сайта, предоставляющего соответствующие сервисы.

    Использование ускорителей обычно включает два сценария — поиск расширенной информации и отсылка информации веб-сервису. В первом сценарии могут использоваться ускорители, предоставляющие картографическую информацию, сервисы перевода, словари, например Яндекс. Карты, Переводчик и словарь Translate.Ru, OioBapH@Mail.Ru, Энциклoпедии@Mail.Ru, Яндекс.Маркет и т. п., тогда как во втором сценарии — это сервисы публикации в блогах, отсылки электронной почты, например no4Ta@Mail.Ru, Опубликовать в Живом Журнале, Блoги@Mail.Ru и т. п.

    Доступ к ускорителям, установленным в Internet Explorer 8, осуществляется либо по щелчку правой кнопки мыши на выбранном фрагменте текста, либо при выборе соответствующего ускорителя командой Page | Accelerators.

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

  • Установка ускорителя.
  • Выбор контекста (выделение текста на странице).
  • Выбор ускорителя.
  • Выполнение активности и переход к сервису. или
  • Предварительный просмотр активности и непосредственное получение результатов.
  • Более подробно создание ускорителей будет рассмотрено в рамках практического занятия №7.

    Создание веб-фрагментов (Web Slices)

    Веб-фрагменты позволяют получать автоматические уведомления об изменениях, произошедших на определенных веб-страницах. Пользователи могут подписываться на фрагменты веб-страниц и получать уведомления через панель "Избранное".

    В настоящее время многие веб-сайты поставляют информацию об обновлениях через механизм RSS-потоков. Этот подход требует дублирования информации, находящейся на сайте, в виде специального XML-файла, который программа чтения RSS-потоков загружает в поисках обновлений. Механизм веб-фрагментов позволяет пользователям подписываться на содержимое страниц непосредственно из веб-браузера и не требует наличия специального XML-файла.

    В основе технологии веб-фрагментов, поддерживаемой в Internet Explorer 8, лежат т. н. "микро-форматы" — подход к выделению определенной информации в составе веб-страницы с помощью специальных тегов.

    Визуальный поиск (Live Search)

    Служба Live Search является простым и доступным решением, предоставляющим пользователям качественный поиск документов, изображений, видеофайлов и любой другой информации в Интернете. Используя внедренный в Live Search механизм макросов, можно конструировать сложные запросы и ограничивать поиск веб-ресурсами определенной тематики. Live Search обеспечивает поиск сайтов на разных языках, в том числе и на русском.

    (рис 25.6)

    Процесс и особенности создания веб - фрагментов, ускорителей и визуального поиска будут рассмотрены, соответственно, в практическом занятии №6,№27,№8.

    Дополнительные источники

  • http://ie8.cnews.ru/article/article_12.shtml
  • http://msdn.microsoft.com/en-us/library/dd565628%28VS.85%29.aspx
  • http://www.akamarketing.com/blog/307-web-developer-tools-included-with-internet-explorer-8.html
  • http://windows.microsoft.com/ru-RU/windows-vista/Internet-Explorer-8-3
  • Вернуться к учебному плану