Laravel framework russian community

Валидность и другие показатели качества сайта

Еще многое предстоит сделать по расширению возможностей сервиса, в планах по реализации три дополнительных направления:

1. Доступность. Соответствие стандарту WCAG (Web Content Accessibility Guidelines), обеспечивающему доступность содержимого сайта для людей с ограниченными возможностями.
2. Совместимость. Мультиплатформенная совместимость снижает затраты на разработку и позволяет пользователям просматривать сайт в любом браузере.
3. Оптимизация. Упрощение и минимизация кода, оптимизация графики и контента делает сайт более открытым для поисковых систем и удобным для пользователей.

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

Рекомендую ознакомиться с другими моими обзорами средств анализирования сайта из рубрики Аудит и тестирование. И конечно же жду Ваших отзывов! Как думаете, сервис найдет свое место в нише и будет пользоваться спросом?

Validating required input

Forms frequently include required input that needs to be clearly identified using labels. Also, the attribute can be added to form controls, to programmatically indicate that they are required. Most current web browsers support this attribute and will communicate missing required input to the user, using standard web browser dialog mechanisms. These dialogs are expected to respect the settings and preferences of the user in the web browser (and operating system), such as default font-size, colors, and language.

In the example below, the attribute is added to the input field. If your web browser supports HTML5, it will not allow you to submit the form without entering text into the input field. Instead, it will display a message that is generated by the web browser itself.

Note that the label also displays “(required)”, to inform users that don’t use assistive technology or use older web browsers that do not support the HTML5 attribute.

Example:

Code snippet:

Note: The attribute informs assistive technologies about required controls so that they are appropriately announced to the users (as opposed to validating the input). Most current web browsers automatically set its value to when the HTML5 attribute is present. In this example, it is provided redundantly to support web browsers that don’t communicate the attribute to assistive technology.

How to Participate

bug reports

Anyone is welcome to provide bug reports, bug fixes, improvement and
patches, ideas, etc. Submissions should be sent to the

mailing list
(send mail).
Please note that any mail sent to this list will be publicly
archived and available, do not send information you wouldn’t want to see
distributed, such as private data.

for this tool is available under
the
W3C Software Licence.

Additional modules

You are welcome to develop and submit additional modules (learn more about the
Modules creation documentation and
API for the modules).

Translations

Translation of the documentation is welcome. If you translate these
documents, please contact us so that we can include your translation to
the alternate versions of this manual. (See more about translations of
W3C documents).

Acknowlegements

Many thanks to…

• Karl Dubost, for his ideas, his patience when testing early versions,
  and continuous help on this project.
• Terje Bless, for his coding improvement proposals
• Ville Skytta, for patches, good ideas and suggestions
• Aaron Straup Cope, for his knowledge of all things Perl
• Slaven Rezic, for patches and bug reports
• …

A bit of History

Since 1994 and the
first HTML validator service, there has been a way to check the validity of one’s
webpage with regards to web standards (HTML, CSS, …). Other services, like
HTML Tidy allow you to
(semi-)automatically fix invalid documents…

This tool is here to make your life as a webmaster, web designer, web developer even
easier, by telling you which documents you should fix in priority.

It has first been developed by Gerald Oskoboiny as
an internal W3C tool (yes, even at W3C we create invalid HTML sometimes) to check the
HTML validity of the webpages on the W3C website, then
released its code
in september 2001.

In 2002, the Quality Assurance team at W3C decided to re-write
it as a modular, portable, and easy-to-use tool for webmasters. Its development continues, mostly
with the addition of new processing modules making the Log Validator a very useful and versatile
Web Quality analysis tool.

Source code and package availabilityfor the W3C Markup Validator

The W3C Markup Validator provides Perl/CGI/SGML/XML/DTD-based
validation of a variety of document types.
SGML and DTDs are older technologies that never found wide use on
the Web, so for checking of HTML documents using modern
technologies, you probably want to instead use the
W3C HTML Checker.
To do that,

• Download the
  latest release version.
• Read the
  usage guide.

If for some reason you’d rather run a service based on the same source as
the W3C Markup Validator, this page provides the following information:

Installing from packages

Rather than trying to install and run an instance of the W3C from
the sources, it’s much easier to install one of a variety of
pre-built packages. The sections below provide information about
packages available for various systems.

Fedora/Red Hat RPM package

Fedora RPM packages of the validator are included in Fedora.
The name of the validator package is w3c-markup-validator,
use the standard automated package management tools of the
distribution (such as yum) to install it along with its
dependencies.

For Red Hat Enterprise Linux and derivative distributions, the
w3c-markup-validator package is available in
EPEL.

openSUSE/SUSE Linux RPM package

openSUSE/SUSE Linux RPM packages of the validator are available,
courtesy of Sierk Bornemann, at software.openSUSE.org,
<http://software.opensuse.org/>.
Starting with openSUSE 10.3, the latest stable validator package and all its
dependencies are included in the official stable openSUSE distribution.
The name of the validator package is w3c-markup-validator,
use the standard automated package management tools of the
distribution (such as YaST, zypper, smart,
apt4rpm or yum) to install it along with its
dependencies.

Additionally, you can also get these and other needed packages
from the openSUSE Software Repository at
<http://software.opensuse.org/package/w3c-markup-validator>

Debian GNU/Linux package

A Debian package is available, courtesy of Frédéric
Schütz.

Starting with Debian 3.1 («Sarge»), the package and all its
dependencies are included in the official Debian distribution, and
can be installed by running the command apt-get install
w3c-markup-validator as root.

Mac OS X Application

The Validator is also packaged as a standalone Mac OS X Application,
called Validator S.A.C., courtesy of Chuck Houpt.

Getting the source

The source code for the W3C
Markup Validation Service is available under the terms of the
W3C
Software License.

If you just want to glance at the code, or see its revision
history, you can
browse it
directly in Github.

The most interesting files are currently
a
CGI script called «check» that does pretty much everything,
and possibly also the
httpd.conf configuration file snippet for Apache.
Select the topmost revision numbers on these
pages to see the most recent revision of each file.

To actually install and run an instance of the W3C Markup Validator from
the sources, see the
installation manual.

Errors and Warnings suppressing

You can ignore some errors or warnings by suppressing them.Note! This feature can be used only on , and formats.

You need to specify field in your project file.

Here can be two arrays, for errors () and warnigns().
Values must be a string parts or fully value of «unwanted» message.
Under the hood — node-w3c-validator will use
method for filtering messages.

For example, you receive warning message:

The “type” attribute for the “style” element is not needed and should be omitted.

Now you can suppress it

{"nodeW3Cvalidator"{"suppressErrors","suppressWarnings""The “type” attribute for the “style” element is not needed and should be omitted."}}

Or like this with a part of message:

{"nodeW3Cvalidator"{"suppressErrors","suppressWarnings""is not needed and should be omitted"}}

Node.js API

Install in your project

npm i --save-dev node-w3c-validator

Parameters:

Name	Data type	Description
		The path to the folder or directly to the file, for verification, also it can be url to the Web document
		Options for validating, sеe description below
		Validation callback, sеe description below

example

• —
• —
• —

an exception

transforms to

exec{    buffersize1024*500}

Validation callback.

Parameters:

Name	Data type	Description
		if no errors — will be , otherwise — Error object
		string with reporting result, if no errors — can be as empty string

Write file

Parameters:

Name	Data type	Argument	Description
			relative path to saving a file
			file output content
		optional

constnodeW3CValidator=require('node-w3c-validator');constvalidatePath='./dist/*.html';constresultOutput='./reports/result.html';nodeW3CValidator(validatePath,{    format'html',    skipNonHtmltrue,    verbosetrue},function(err,output){if(err ===null){return;}nodeW3CValidator.writeFile(resultOutput, output);});

Поддержка проверки браузерами

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

Поддержка проверки браузерами

Браузер	IE	Firefox	Chrome	Safari	Opera	Safari iOS	Android
Минимальная версия	10	4	10	5	10	—	—

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

С другой стороны, ваш веб-сайт может содержать сложные формы, в которых можно сделать массу ошибок при вводе данных, и вы не хотите потерять тех IE-пользователей, которые после первой неудачной попытки заполнить вашу форму не предпримут другую. В таком случае у вас есть два пути: разработать и использовать свою систему проверки или же использовать библиотеку JavaScript, чтобы компенсировать умственную отсталость IE. Какой из этих двух подходов выбрать, зависит от объема и сложности проверки.

На странице HTML5 Cross Browser Polyfills можно найти длинный список библиотек JavaScript, которые все, по большому счету, делают то же самое. Одна из лучших среди этих библиотек — это webforms2.

Библиотека webforms2 реализует все рассмотренные на данный момент атрибуты. Для использования библиотеки загрузите все ее файлы в папку своего веб-сайта (а лучше в подкаталог папки веб-сайта) и добавьте в веб-странице ссылку на эту библиотеку.

Библиотека webforms2 хорошо интегрируется с другой заплаткой JavaScript, называющейся html5Widgets. Она реализует поддержку возможностей форм, которые мы рассмотрим далее, таких как ползунок и средства выбора даты и цвета. Обе эти библиотеки предоставляют хорошую общую поддержку для веб-форм, но содержат в своем коде неизбежные пробелы и незначительные ошибки. Качество сопровождения и усовершенствования этих библиотек покажет только время.

Как проверить сайт на валидность

Для проверки безукоризненности кода чаще всего используют очень полезный сайт валидатор «Markup Validation Service», расположенный по адресу: http://validator.w3.org, созданный компанией W3C.

HTML

Здесь перед Вами три варианта валидации:

• ввести URL-адрес страницы;
• загрузить файл с кодом со своего компьютера;
• вставить готовый код в форму.

Сервис указывает не только на ошибки html кода и их расположение, но и даёт советы по исправлению. Если код уже имеется в Сети, то можно произвести валидацию путём введения её URL-адреса в форму «Validate by URL» и нажатия кнопки Check. Валидатор HTML включит считывание кода и сообщит об итогах.

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

В этом видео наглядно объяснён процесс проверки с помощью валидатора:

Проверка локальных файлов

По этому же адресу http://validator.w3.org можно проверить код, выбрав вкладку «Validate by File Upload» и загрузив документ с прописанным код.

Выбираем путь к необходимому файлу и жмём Check. Далее всё происходит аналогично.

Использование формы для ввода кода

Иногда удобней вставить сразу код страницы и проверить его онлайн: выбираем вкладку «Validate by Direct Input» и отправляем весь код на сервер.

CSS

Проверка валидности кода CSS может быть пройдена также онлайн валидатором: https://jigsaw.w3.org/css-validator/

Здесь все на русском языке, для многих это действительно приятный сюрприз.

Снова можно выбрать — указать URL, загрузить свой файл или вставить код.

Осуществляется проверка сайта на ошибки, как и в случае с HTML, и — получаем ответ от сервера. Настроек проверки не имеется, однако можно изучить предлагаемый сгенерированный валидный код, расположенный после списка недостатков кода.

Пример:

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

Расширения для браузеров

Для браузеров существуют всевозможные расширения для проверки валидации. Для Google Chrome есть проверяющий валидность кода плагин HTML Tidy Browser Extension, для Opera — расширение Validator, для Safari — Zappatic, для Firefor — HTML Validator.

Остановимся на последнем более детально. Он осуществляет ту же проверку, что и validator, только оффлайн. Взять его можно здесь http://users.skynet.be/mgueury/mozilla/

Устанавливаем расширение, перезагружаем браузер — и можно сразу работать. В случае возникновения заморочек с установкой, можно написать в саппорт Mozilla Firefox или полистать форум http://forum.mozilla-russia.org/doku.php?id=general:extensions_installing

Подробное видео об установке HTML Validator и его использовании:

При загрузке любого URL расширение автоматически включается и считывает код. Результат виден в правом верхнем углу.

Выглядит результат как небольшая картинка с итогом валидации:

Щёлкнув по результату, можно открыть:
— исходный код;
— ошибки — в левом нижнем блоке (или сообщение о валидности);
— подсказки по исправлению ошибок — в правом нижнем.

Что такое валидность?

Валидация — это проверка на соблюдение установленных норм, а в контексте, применяемом вебмастерами — корректности кода страниц: синтаксических ошибок, вложенности тэгов и т. п. Если все делать «правильно», код страницы не должен содержать неверные атрибуты, конструкции и ошибки. Валидация сайта позволяет выявить недостатки, которые следует исправить.

Валидность сайта — это соответствие кода существующим стандартам HTML.

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

Что такое валидаторы кода

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

Основные «приметы» валидной верстки

Валидная вёрстка содержит код, полностью соответствующий требованиям W3C (World Wide Web Consortium), занимающейся разработкой технологических стандартов для всего Интернета.

Если код на страницах сайта верный, то во всех браузерах сайт отображается корректно (а не криво).

Отсутствуют подозрения о несправедливом «понижении» в выдаче и нет страниц, выкинутых из индекса.

Пример. Если, предположим, неправильно стоят теги <h1>..<h6>, <noindex> (в частности, отсутствует закрывающий элемент), то поисковик не будет ничего исправлять — он будет интерпретировать так, как написано черным по белому в коде. В итоге могут возникнуть последствия, связанные уже с продвижением сайта.

Часто задаваемые вопросы

Верификация – это соответствие системы, процесса или продукта требованиям производителя (нормативам, инструкциям, техническим характеристикам и т.д.). Валидация – это соответствие требованиям пользователя. Также между ними следующие отличия:

• валидацию проводят тестировщики или пользователи, верификацию – производитель;
• задача верификации – проверить, соблюдены ли требования к производству; задача валидации – проверить, соблюдены ли требования потребителя к конечному продукту;
• верификация проводится в обязательном порядке, валидация – только если того требуют стандарты или потребители;
• верификация всегда объективна (продукт может либо соответствовать указываемым техническим характеристикам, либо нет); валидация субъективна (насколько успешно продукт можно использовать в конкретных условиях, определяют люди).

Процедура валидации аккаунта максимально приближена к верификации: пользователь документально подтверждает то, что он – реальный владелец аккаунта и производит все действия, которые с этого аккаунта совершаются. Физически подтверждение проводится через привязку вашей страницы в соцсети к номеру телефона (зайти в свой аккаунт вы можете только с использованием того номера, с которым связана страница). Без валидации аккаунта невозможно пользоваться соцсетью (доступен лишь просмотр ограниченного количества страниц). Любые же действия с вашего аккаунта автоматически считаются совершенными вами.

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

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

Misc.

Testing

x { color: red }
x { color: green }
...
x { color: #eee }
x { color: #000 }
...
x { color: rgb(0, 0, 0) }
...

to get an idea of the implementation status for CSS3 features and to ensure that legal style sheets are not invalidated… Woult not be perfect as the lexical space might be infinite

x { width: 0px }
x { width: 1px }
x { width: 2px }
x { width: 3px }
...

but it is unlikely that there are bugs in this direction, except maybe

x { width: 16385px }                /* a */
x { width: 65537px }                /* b */
x { width: 4294967296px }           /* c */
x { width: 18446744073709551617px } /* d */
...

but these might be special cases… Indeed, the CssValidator does not handle this properly, it validates d but pretty prints

x { width : 1.8446744E19px }

which is not allowed… but that would be out of scope here, as only the pretty printer is affected…

Build instructions

Follow the steps below to build, test, and run the checker such that you can
open in a Web browser to use the checker Web UI.

1. Make sure you have git, python, and JDK 8 or above installed.

2. Set the environment variable:

   export JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64 <— Ubuntu, etc.

   export JAVA_HOME=$(/usr/libexec/java_home) <— MacOS

3. Create a working directory:

   git clone https://github.com/validator/validator.git

4. Change into your working directory:

   cd validator

5. Start the checker Python script:

   python ./checker.py all

The first time you run the checker Python script, you’ll need to be online and
the build will need time to download several megabytes of dependencies.

The steps above will build, test, and run the checker such that you can open
in a Web browser to use the checker Web UI.

Warning: Future checker releases will bind by default to the address
. Your checker deployment might become unreachable unless you use the
option to bind the checker to a different address:

Use to see command-line options for controlling the
behavior of the script, as well as build-target names you can call separately;
e.g.:

• python ./checker.py build # to build only

• python ./checker.py build # test to build and test

• python ./checker.py run # to run only

• python ./checker.py jar # to compile vnu.jar

• python ./checker.py update-shallow &&
    python ./checker.py dldeps &&
    python ./checker.py jar  # compile vnu.jar faster

Используем JavaScript

JavaScript даёт намного больше возможностей для улучшения работы пользователей с формами. Давайте рассмотрим в качестве примера три числовых поля, у каждого из которых установлен минимум в 10, максимум в 100 и шаг в 10 единиц.

Устанавливая атрибуты , и , мы можем быть уверены в правильности значения только тогда, когда пользователь использует специальные контролы числового поля. Но что мешает пользователю ввести вручную некорректные данные? Вот что произойдёт, если он вставит , и в три поля и отправит форму:

Стандартный тултип валидации

В результате всё, что получит пользователь — это сообщение об ошибке для первого поля. Кроме того, в этом сообщении будет указано лишь одно несоответствие из двух требуемых. Такое поведение можно исправить, изменяя показываемые валидатором сообщения.

Добавляем несколько сообщений об ошибках в один тултип

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

Примечание переводчика: Слово «mismatch» переводится как «несоответствие». Поэтому в значениях , и обратная логика: — значение не удовлетворяет атрибуту, — удовлетворяет.

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

Теперь при попытке отправить форму мы увидим вот это:

Отображаем несколько ошибок в одном тултипе

Стало лучше, поскольку теперь будут показываться все сообщения об ошибках, связанные с конкретным полем. Однако другая проблема всё ещё не решена: ошибки по-прежнему показываются лишь для первого поля.

Это ограничение валидации, устанавливаемое браузером. Чтобы его побороть, нам нужно пойти другим путём.

Показываем все ошибки для всех полей.

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

Этого можно добиться какой-то парой дополнительных строчек в нашем коде:

Вот что происходит при клике на submit теперь:

Отображаем все ошибки для всех полей в DOM

Используем нестандартные проверки валидности

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

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

Валидация в реальном времени

Хотя текущий способ выглядит намного лучше, он тоже не без изъянов. Наихудший из недочётов заключается в том, что пользователь не сможет увидеть никаких сообщений, пока не нажмёт на кнопку отправки формы. Было бы гораздо лучше, если бы валидация поля происходила сразу же при его заполнении. Можно выделить три правила для того, чтобы с формой было удобно работать:

1. Требования для каждого поля чётко видны до того, как пользователь начал печатать.
2. Как только пользователь начинает вводить данные, соблюдая требования, он сразу видит индикатор успешного заполнения поля или подсказки, если есть ошибки.
3. Нужно отображать сообщения об ошибках таким образом, чтобы пользователь не мог отправить некорректно заполненную форму.

В статье на следующей неделе (оригинал, перевод готовится) я покажу, как реализовать валидацию в реальном времени, переделав вот такую простую форму регистрации:

Пример валидации в реальном времени

Если вы хотите попробовать свои силы (и даже сделать получше), вы можете воспользоваться вот этим шаблоном.