Сдам Сам

ПОЛЕЗНОЕ


КАТЕГОРИИ







Различные браузеры интерпретируют неправильный код HTML по разному





Действительный код HTML является только контрактом, который вы заключаете с производителями браузеров. Спецификация HTMLговорит, как вы должны написать это, и как они должны интерпретировать ваш документ. В последнее время соответствие браузеров стандартам достигло той точки, где, если вы пишете действительный код, все основные браузеры должны интерпретировать ваш код одинаково. Это почти всегда касается в любом случае HTML, в то время как другие стандарты имеют немного больше различий в поддержке в различных браузерах. Но что будет, если передать браузеру недействительный (невалидный) код? Что тогда произойдет? Ответ состоит в том, что в браузере начинает работать обработка ошибок, чтобы определить, что делать с кодом. Браузер, как правило, поступает следующим образом: "ладно, этот код недействителен, как можно представить эту страницу конечному пользователю? Давайте заполним недостающее следующим образом!" Звучит прекрасно, не правда ли? Если на странице имеется несколько ошибок, то браузер заполнит вместо вас недостающее? Не совсем так, так как каждый браузер делает это по-разному. Например:

<p><strong>This text should be bold</p><p>Should this text be bold? How does the HTML look when rendered?</p><p><a href="#"></strong>This text should be a link</p><p>Should this text be a link? How does the HTML look when rendered?</p>

Ошибки состоят в том, что элемент strong неправильно вложен в несколько блочных элементов, а элемент анкера не закрыт.

Когда вы попробуете вывести этот код в различных браузерах, они интерпретируют код совершенно по разному:

· Opera сделает последующие элементы потомками элемента strong.

· Firefox добавит дополнительные элементы strong между параграфами, которые не присутствуют в разметке.

· Internet Explorer поместит текст "This text should be a link" ("Этот текст должен быть ссылкой") вне тега анкера, который создает ссылку.

Исходную версию этого примера можно найти в статье Халворда Стина "Одинаковые ошибки DOM, различная интерпретация в браузерах" (http://www.thinkvitamin.com/features/dev/same-dom-errors-different-browser-interpretations) — прочтите ее, чтобы познакомиться с более глубокой обработкой ошибок HTML, и дополнительной информацией об инструментах отладки. Ни одно из поведений различных браузеров не является неправильным; все они пытаются заполнить пробелы неправильного кода. Главный вывод состоит в том, что надо стараться избегать на странице недействительной разметки, если это возможно!

Quirksmode

Надо знать еще о так называемом режиме Quirksmode. Браузер переходит в этот режим, если встречает страницу, которая имеет неправильный doctype, или вообще не имеет doctype. В этом режиме браузер делает наилучшие предположения о множестве правил, согласно которым он должен интерпретировать код, и снова заполняет пробелы как можно лучшим образом. Этот режим существует в действительности для того, чтобы можно было все еще выводить старые страницы, и не должен никогда использоваться при создании новых страниц.

Как выполнить валидацию страниц

Теперь, когда мы исследовали теорию, лежащую в основе валидации HTML, поговорим о более простых вещах - реальной валидации! Впрочем, это не совсем точно. Поместить URL в валидатор и наблюдать, будет страница валидной или нет, действительно легко; понять, что неправильно и исправить ошибки иногда бывает трудно, так как сообщения об ошибках могут быть иногда слишком загадочными. Мы рассмотрим несколько примеров ниже.

Пример, рассматриваемый в этом разделе, имеет следующий вид:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>Validating your HTML</title> </head> <body> <h2>The tale of Herbet Gruel</h2> <pGT;Welcome to my story. I am a slight whisp of a man, slender and fragile, features wrinkled and worn, eyes sunken into their sockets like rabbits cowering in their burrows. The <em>years have not been kind to me</em>, but yet I hold no regrets, as I have overcome all that sought to ail me, and have been allowed to bide my time, making mischief as I travel to and fro, 'cross the unyielding landscape of the <a href="http://outer-rim-rocks.co.uk" colspan="3">outer rim</a>.</p> <h3>Buster</h3> <p>Buster is my guardian angel. Before that, he was my dog. Before that, who knows? I lost my dog many moons ago while out hunting geese in the undergrowth. A shot rang out from my rifle, and I called for Buster to collect the goose I had felled. He ran off towards where the bird had landed, but never returned. I never found his body, but I comfort myself with the thought that he did not die; rather he transcended to a higher place, and now watches over me, to ensure my well-being. <h3>My possessions</h3> <p>A travelling man needs very little to accompany him on the road:</p> <ul> <li>My hat full of memories</li> <li>My trusty walking cane</li> <li>A purse that did contain gold at one time</li> <li>A diary, from the year 1874<li> <li>An empty glasses case</li> <li>A newspaper, for when I need to look busy</li> </ul> </body>

Эта простая страница состоит из трех заголовков, трех параграфов, одной гиперссылки, и одного неупорядоченного списка. Она использует doctype XHTML 1.0 Strict в качестве своего множества правил для валидации. В документе имеется несколько ошибок, которые мы рассмотрим ниже, используя валидатор W3C HTML.

Валидатор W3C HTML

Как упоминалось выше, W3C имеет на своем сайте онлайновый валидатор (http://validator.w3.org/) — откройте его в браузере в отдельной вкладке — будет полезно иметь возможность переключаться между вкладками браузера с валидатором и рассматриваемым примером из этой статьи.

Отметим, что можно также выполнять валидацию страниц в валидаторе W3C прямо из браузера Opera, выполняя просто щелчок правой кнопкой мыши/при нажатой клавише Ctrl и выбирая пункт меню "Validate" ("Соблюдены ли Web -стандарты").

Можно заметить, что валидатор имеет три вкладки вверху интерфейса:

· Проверка URI: Позволяет ввести адрес страницы в Интернет для валидации.

· Проверка загруженного файла: Позволяет загрузить для валидации файл HTML.

· Проверка прямого ввода: Позволяет скопировать содержимое файла HTML в окно для валидации.

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


Рис. 24.1. Результаты валидации образца документа —17 ошибок!

Это может звучать угрожающее, особенно, когда я говорю, что в документе имеется 17 ошибок! Не отчаивайтесь - валидатор сообщает больше ошибок, чем существует в действительности, так как часто ошибка в начале страницы будет каскадом порождать наведенные ошибки дальше, так как все больше элементов кажутся незакрытыми или неправильно вложенными. Необходимо просто подумать о том, что означают сообщения об ошибках, и искать очевидные ошибки в разметке. Таблица 24.1 ниже показывает все исправленные ошибки, чтобы можно было получить валидную страницу, вместе с объяснением, что было неправильно, и сделанное для разрешения проблемы исправление.

Таблица 24.1. Исправленные ошибки, чтобы сделать пример страницы допустимым
Сообщение об ошибке Логика Сделанное исправление
Строка 8, столбец 461: отсутствует атрибут "colspan" Мы знаем, что имеется атрибут colspan, и это допустимый HTML, поэтому почему сообщение о том, что он не существует? Подождите, может быть это означает, что он используется с элементом, на котором не должен использоваться? Конечно, он используется на элементе a — неверно! Удален атрибутаcolspan из элемента a
Строка 13, столбец 7: тип документа не допускает здесь элемент "h3"; пропущен один из начальных тегов "object", "applet", "map", "iframe", "button", "ins", "del". <h3>My possessions</h3> Опять на первый взгляд это кажется странным — элемент h3 правильно закрыт, и допустим в этом контексте. Необходимо отметить, что часто это сообщение об ошибке означает, что поблизости имеется незакрытый элемент … Добавлен закрывающий тег p в строке выше данного заголовка
Строка 19, столбец 40: тип документа не допускает здесь элемент "li"; пропущен один из начальных тегов "ul", "ol", "menu", "dir". <li>A diary, from the year 1874<li> Это достаточно просто — можно сразу увидеть из представленной строки, что в конечном теге li отсутствует закрывающая косая черта (/) Добавлена закрывающая косая черта в рассматриваемой строке
Строка 23, столбец 9: отсутствует конечный тег для "html", но было определено OMITTAG NO.</body> Опять легко понять, что это означает, что конечный тег htmlотсутствует. Объяснение сообщения об ошибке даже начинается со слов "Вы могли не закрыть элемент". Добавлен отсутствующий конечный элемент html.

После исправления этих ошибок валидатор выдает теперь достаточно удовлетворительное сообщение об успехе, как показано на рис.24.2:


Рис. 24.2. Сообщение об успехе, говорящее, что все ошибки были исправлены

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

Заключение

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

Другие инструменты, с которыми стоит познакомиться

· Меню отладки Opera (http://dragonfly.opera.com/app/debugmenu/DebugMenu.ini)

· Букмарклет общей валидации (https://www.squarefree.com/bookmarklets/validation.html)

· Расширение панели Web -разработчика в Firefox (http://chrispederick.com/work/web-developer/)

· Панель инструментов разработчика в IE

· Safari tidy (http://zappatic.net/safaritidy/)

· HTML tidy (http://tidy.sourceforge.net/)

Контрольные вопросы

· Что происходит, когда браузер встречает недействительный HTML?

· Какая возникает в этом случае проблема?

· Будет ли использование frameset в документе проверяемом согласно doctype HTML 4 Strict порождать ошибку?

Лекция 25:

Основы доступности

Аннотация: Рассмотрены вопросы, что такое доступность, почему это важно, как обеспечить доступность сайтов, и какие существуют рекомендации для создания доступных сайтов

Введение

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

· Что такое доступность?

· Почему важна доступность?

o Требования закона о доступности

o Потенциальные рынки

o Поисковые системы

o Этика и брендинг

· Проектирование с учетом доступности

· Требования взаимодействия

· Свойства доступной Web -страницы

o Семантическая структура

o Альтернативный контент

o Определение взаимодействия

· Стандарты доступности

o Рекомендации по доступности контента Web 1.0

o Рекомендации по доступности контента Web 2.0

o Section 508

o Другие стандарты

· Заключение

· Контрольные вопросы

Прежде чем переходить к специальному рассмотрению доступности в Web, давайте начнем с рассмотрения доступности в общих терминах - в конце концов, доступность не является проблемой, связанной только с Web -сайтами, это потенциальная проблема любой службы, объекта или технологии, с которыми можно столкнуться в жизни. Отметим, что связанной темой для изучения является WAI ARIA (http://www.w3.org/WAI/intro/aria) — инициатива по созданию Доступных развитых приложений Web организации Web Accessibility Initiative, которая является по сути методологией, позволяющей создавать более доступные приложения, использующие Ajax/JavaScript. Прекрасная вводная статья о ARIA находится на сайте http://dev.opera.com.

Что такое доступность?

Посмотрите вокруг. Будем надеяться, что вы увидите других людей; если не увидите, почему бы не сделать небольшую прогулку? Вы, вероятно, получите удовольствие от прогулки, и она пойдет вам на пользу. Все люди, которых вы встретите, не похожи друг на друга - у одних темные волосы, у других - нет. Некоторые голубоглазые, а другие - нет. Кто-то использует очки, а кто-то - нет. Все мы чем-то отличаемся друг от друга. Некоторые различия, такие как цвет волос или глаз, являются косметическими - они не влияют существенно на нашу жизнь. Некоторые отличия, такие как очки, могут влиять. Доступность является простой вещью, философией, хотя в некоторых странах она является также частью закона. Доступность рассматривает каждого, независимо от его возможностей, равноценными. Я понимаю, что это высказывание открыто для интерпретации. Большинство дискуссий о доступности прежде всего говорит об ограниченных возможностях. Это предполагает, что люди с ограниченными возможностями заслуживают специального обращения. Доступность говорит не об этом - это на самом деле признак того, как люди традиционно создают здания, Web -сайты, и фактически почти все остальное в своей жизни. Когда вещи создаются с предположением, что все люди похожи друг на друга, то они всегда будут неподходящими для некоторых людей. Люди предполагают, что доступность состоит в помощи людям с физическими недостатками, так как модернизированная доступность вполне очевидна в нашем обществе. Например, многие здания, которые начинали свое существование, имея только ступеньки, внезапно породили дешевые уродливые пандусы. Однако, доступность давно рассматривается как свойство при проектировании изделий военного назначения. Почему? Потому что это часто является критически важным для выживания - при больших перегрузках пилоты реактивных самолетов не могут делать те же вещи, что они могут делать на земле. Если бы конструкторы самолетов не учитывали потребности пилотов при высокой и низкой гравитации, то тогда было бы, наверняка, значительно больше разбитых самолетов. Что это означает для разработчиков Web -сайтов? Короткий ответ состоит в том, что необходимо пытаться лучше узнать потребности всей аудитории, которая может посетить ваш сайт. Более длинный ответ может требовать некоторого изучения различных уровней возможностей, которые могут иметь люди, и как они используют компьютеры. Применяя методы, описанные в данном руководстве и других связанных статьях, можно создавать сайты, которые работают со многими формами взаимодействия. Создаваемые Web -сайты будут доступны пользователям, которые:

· Являются слепыми или со значительными недостатками зрения, и прослушивают Web -сайты с помощью считывателей экрана, или воспринимают их на дисплее Брайля.

· Являются близорукими, и увеличивают изображение до шрифта размером 200%.

· Имеют двигательные недостатки, и поэтому не могут использовать руки для управления мышью, и вынуждены использовать джойстик для управления клавиатурой, или специальное устройство указания с помощью глаз для управления Web -сайтом.

· Используют шаровой указатель, или другие более необычные типы систем управления компьютером.

Не беспокойтесь о специфических особенностях этих взаимодействий - мы рассмотрим их последовательно в дальнейшем.







ЧТО ПРОИСХОДИТ, КОГДА МЫ ССОРИМСЯ Не понимая различий, существующих между мужчинами и женщинами, очень легко довести дело до ссоры...

Что делать, если нет взаимности? А теперь спустимся с небес на землю. Приземлились? Продолжаем разговор...

Что вызывает тренды на фондовых и товарных рынках Объяснение теории грузового поезда Первые 17 лет моих рыночных исследований сводились к попыткам вычис­лить, когда этот...

Что способствует осуществлению желаний? Стопроцентная, непоколебимая уверенность в своем...





Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте:


©2015- 2024 zdamsam.ru Размещенные материалы защищены законодательством РФ.