Предупреждение валидатора validator.w3.org

alexburn · 10-04-2021, 10:20:54

Приветствую, ребята! Подскажите пожалуйста с таким вопросом. Валидатор делает предупреждение с таким текстом:
Article lacks heading. Consider using h2-h6 elements to add identifying headings to all articles.
указывая на такую конструкцию:
<article class="col-12 col-md-8 MainColumn">
Я так понимаю, что не хватает заголовков h1-h6, но в моей разметке они присутствуют.
[spoiler]
<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="Прикладные программы, сроки заказа программ, услуги программиста, выполнение проекта, качество продукта">
<meta name="description" content="Легко ли написать хорошую программу ? Сколько нужно времени разработчику, чтобы сделать хорошую прикладную программу?">
<title>Про-Кодер - «вовремя» или «качественно»?</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

<script src="/Scripts/modernizr-2.8.3.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<div>
<a class="navbar-brand" href="/">
<img class="img-responsive" src="/Static/Images/logo.png" alt="Про-кодер" />
</a>
<>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="/Stati">Статьи</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Programmy">Программы</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Diy">Пет-проекты</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Frilans">Фриланс</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Kontakty">Контакты</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0" method="get" action="/Home/SearchInfo">
<input class="form-control mr-sm-2 bg-dark searchString" name="searchString" type="search" placeholder="Найти..." aria-label="Search">
<button class="btn btn-outline-warning my-2 my-sm-0" type="submit">Search</button>
</form>
<>
</nav>
<div class="scrollup">

<i class="fa fa-chevron-up"></i>
<>

<div class="body-content">

<div class="container">
<div class="row">
<div class="col-12 ArticteContainer">
<div class="row justify-content-around">
<article class="col-12 col-md-8 MainColumn">
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-transparent">
<li class="breadcrumb-item"><a href="/">Главная</a></li>
<li class="breadcrumb-item"><a href="/">Статьи</a></li>
<li class="breadcrumb-item active" aria-current="page">«вовремя» или «качественно»?</li>
</ol>
</nav>
<h1>«вовремя» или «качественно»?</h1>
<p>Первая проблема, с которой сталкивается любой программист – утверждение времени выполнения проекта. Легко устанавливать дедлайн, управляя рабочими на заводе. Но программист – не просто исполнитель заказа. При написании софта фактически приходится выбирать: получить продукт вовремя или в наилучшем качестве. Именно «или» - третьего не дано. Выполнение обоих условий одновременно – что-то из разряда фантастики. Есть исключительные случаи, но их слишком мало. И этому есть объяснение.</p>

<h2 style="text-align:center">Сроки в программировании?</h2>

<p>Качественный софт и четкое временное планирование – несовместимые понятия? Сложный вопрос, продиктованный опытом. Достаточно вспомнить проекты, сделанные на совесть. По скольким из них были сорваны сроки? Однозначно – почти по всем.</p>

<p>Обычно перед исполнителем стоит задача – успеть. Уложиться в отведенные сроки во что бы то ни стало. Сдав заказ точно в оговоренные временные рамки, программист выполняет его лишь формально. Такой проект – сборник «косяков» и недоработок, а иногда и вовсе провальная идея. Продукт неудобен или просто не работает. Как итог – часы и дни работы по исправлению кода, иногда - написание софта с нуля из-за отсутствия перспектив получившегося «творения».</p>

<p>Есть проекты с гибкими сроками сдачи. Нет, в них все-таки определен дедлайн, но его временные границы размыты. Опыт показывает, что в таких условиях создается более качественные прикладные программы. Довольны и заказчик, и исполнитель. Но стоит ли говорить, насколько редки такие проекты?</p>

<p>Креативность, мастерство и непредсказуемость – друзья профессионального программиста. Они позволяют «выдать» качественный продукт, но просто ненавидят жесткие временные рамки. Разберемся, почему.</p>

<h2 style="text-align:center">Программирование и креатив</h2>

<p>Программирование – это творчество. <a href="/Frilans" target="_self" title="что можно заказать">Услуги программиста</a> – это выполнение незаурядных задач. Конечно, встречаются «шаблонные» виды деятельности и тривиальные задания, но речь не о них.</p>

<p>Работа на серьезном уровне предполагает генерацию идей и поиск нестандартных решений. Именно от творческой составляющей программист получает удовольствие. Создавать нечто новое сложно, но безумно интересно. А вот выполнять простой набор инструкций – не совсем. Чем больше простора для творчества, тем больше увлекает работа, тем оригинальней готовое техническое решение.</p>

<p>Будучи творческой работой, программирование не может существовать без метода проб и ошибок. Невозможно увидеть идеальное решение, не начав писать код. Каждая идея проходит проверку практикой. Какой бы уникальной ни была задумка, возникают недочеты и недоработки. Правка – время, поиск нового решения – снова время.</p>

<p>Невозможно смоделировать процесс создания софта на бумаге – наработки так и останутся теорией. На практике возникнут новые проблемы и вызовы, о которых не может знать наперед даже самый опытный аналитик. Работа программиста – импровизация, создание и проверка гипотез. Эта деятельность не сочетается с жесткими временными рамками.</p>

<p>Иногда полезнее отложить выполнение проекта, чем сдать его в вовремя. Человеческий мозг не генерирует оригинальные идеи по приказу извне - поиск решения идет параллельно с другими видами деятельности. Решение возникает неожиданно (естественно, если человек обладает мотивацией к его поиску). Это можно сравнить с программой, работающей в фоновом режиме и периодически присылающей уведомления. Но далеко не все заказчики понимают, что отказ от срочного выполнения работы скорее пойдет на пользу. Более того, они уверены в обратном.</p>

<h2 style="text-align:center">Работа мастера</h2>

<p>Легко создать софт, который работает. Сложно создать софт, у которого будет не только настоящее, но и будущее – в этом состоит задача мастера. Качественный проект должен пройти проверку временем. Уровень мастерства определяется качеством работы. Количество выполненных проектов не имеет значения, если ваш код – повод посмеяться и показать, как делать не стоит. Можно написать программу в рекордные сроки, попутно наделив ее приятным внешним видом. Но работать она будет так, что вас не раз вспомнят недобрым словом. Для создания хорошей программы нужно немало времени. Высокие требования к качеству продукта автоматически вычеркивают из задачи фразу «сделать как можно быстрее».</p>

<p>Мастер заботится о тех, кто будет обслуживать и использовать его программу в будущем, делая качественный продукт. Эффект должен быть долгосрочным, но при этом заказчик просит написать программу побыстрее.</p>

<p>На деле требуется проверить несколько гипотез, прежде чем «выдать» идеальное решение. Сделать рефакторинг, обнаружив неудачный фрагмент кода. Полноценно прoтестировать продукт, а после – исправить недочеты. Если <a href="/stati/kak-najti-programmista.html" target="_self" title="Как найти программиста ?">программист</a> работает с коллегами, необходимо согласовать стратегию работы и обсудить каждый этап при выполнении проекта. Никто не знает, сколько времени на это потребуется. А значит – сроки предсказать невозможно. Но на практике срок выполнения часто оказывается первостепенным, качество – второстепенным.</p>

<p><img alt="сроки программирования" src="images/articles/maxresdefault.png" style="display:block; margin-left:auto; margin-right:auto" title="время создания программ" /></p>

<h2 style="text-align:center">Непредсказуемость</h2>

<p>Компьютерные программы – сложные системы. Их элементы «впитывают» эмоции, мотивацию, проблемы и психологические барьеры людей, их создающих. Перечисленные составляющие невозможно смоделировать, а тем более – выразить количественно.</p>

<p>В программировании имеют место быть нелинейные реакции. Увеличивая одну переменную в N раз, вы ждете, что другая переменная увеличится в той же пропорции. Получается по-другому: эффект может быть как более сильным, так и более слабым.</p>

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

<p><a href="/stati/dlya-chego-zakazivat-programmi.html" target="_self" title="Для чего заказывать программы ?">Заказать программу</a> – значит, гарантировать себе неопределенность при оценке времени выполнения задачи. Ошибка в прогнозе велика, даже когда дедлайн устанавливает сам разработчик. Если о времени выполнения проекта говорит человек, далекий от программирования, он правильно оценит временные затраты только по счастливой случайности.</p>

<p>Невозможно предсказать, какие результаты даст обратная связь, сколько времени потребуется на обработку полученной информации и как долго программист будет исправлять недочеты. Не исключено, что для получения результата понадобится несколько неудачных попыток рефакторинга кода. Стоит повторить – разработка прикладных программ требует времени.</p>

<h2 style="text-align:center">Что делать со сроками?</h2>

<p>Стремление предугадать дату сдачи качественной, полностью рабочей программы обречено на провал. Процесс написания прикладных программ непредсказуем. Мастеру необходимо концентрироваться на качестве прикладной программы. А как быть с требованиями заказчика?</p>

<p>Одно из решений проблемы – работа грамотного технического менеджера. Он сокращает разрыв в понимании между заказчиком и исполнителем. Это позволяет давать программисту определенную свободу действий, в том числе – гибкие сроки выполнения работы.</p>

<p>Еще одна составляющая успеха – наличие доверительных отношений между бизнесом и программистом. Зная о качестве работы мастера, заказчик с пониманием относится к переносу выпуска финальной версии. Он уверен, что на выходе получит достойный продукт. Но доверие нужно заслужить, что невозможно при работе по первому проекту с новым заказчиком.</p>

<p><img alt="заказать программу быстро" src="images/articles/59556.png" style="display:block; margin-left:auto; margin-right:auto" title="время выполнения заказа" /></p>

<p>В программировании не нужны конкретные временные рамки. Лучше, если срок выполнения будет варьироваться, например, в промежутке 4-6 недель, чем будет установлена крайняя дата. Так срыв сроков не воспринимается болезненно ни коллегами, ни самим исполнителем.</p>

<p>Программист – первый, кто заинтересован в техническом качестве продукта. Говоря о сроках, заказчик должен понимать, что у него и исполнителя одна общая цель. Полезнее объединить усилия, сделать работу более комфортной и продуктивной, а не жить конкретными датами.</p>

<p>Проблема сроков – одна из самых сложных в программировании. Но она решаема. Обе стороны должны быть заинтересованы в качественном программном обеспечении. Грамотный заказчик ставит на первое место качество продукта и только потом говорит о сроках. Сотрудничество строится на понимании и доверии. Такая работа – залог успеха.</p>

<aside>
<h3>Будет интересно</h3>
<div class="card-group">
<div class="card bg-dark" style="margin: 0.5rem">
<div class="card-body">
<h4 class="card-title"><a href="/Stati/oshibki-programmistov.html">Ошибки программистов</a></h4>
<p class="card-text">Перед вами несколько распространённых ошибок, которые совершают не только начинающие программисты, но и опытные разработчики программного обеспечения. Некоторые из них приводили ...</p>
<>
<>
<div class="card bg-dark" style="margin: 0.5rem">
<div class="card-body">
<h4 class="card-title"><a href="/Stati/windows-ili-linux.html">Windows или Linux ?</a></h4>
<p class="card-text">Сейчас трудно представить жизнь без компьютера. И если бы мы спросили вас о том, под управлением какой операционной системы он работает, ...</p>
<>
<>
<div class="card bg-dark" style="margin: 0.5rem">
<div class="card-body">
<h4 class="card-title"><a href="/Stati/prikladnoe-programmirovanie-v-biznese.html">Прикладное программирование в бизнесе</a></h4>
<p class="card-text">Прикладные программы в бизнесе позволяет моделировать бизнес-процессы, прорабатывать наиболее эффективные планы стратегического развития компании, оптимизировать её работу по всем направлениям, начиная ...</p>
<>
<>
<>
</aside>
</article>
<aside class="col-12 col-md-3 RightColumn">
<div class="PanelBox">
<div class="PanelBoxHeader">
<h3>Популярное</h3>
<div class="row">
<div class="col-12" style="margin-bottom: 0.5rem">
<div class="card bg-dark">
<div class="card-body">
<h4 class="card-title"><a href="/Stati/sroki-programs.html">«вовремя» или «качественно»?</a></h4>
<p class="card-text">Первая проблема, с которой сталкивается любой программист – утверждение времени выполнения проекта. Легко устанавливать дедлайн, управляя рабочими на заводе. Но программист ...</p>
<>
<>
<>
<div class="col-12" style="margin-bottom: 0.5rem">
<div class="card bg-dark">
<div class="card-body">
<h4 class="card-title"><a href="/Stati/windows-ili-linux.html">Windows или Linux ?</a></h4>
<p class="card-text">Сейчас трудно представить жизнь без компьютера. И если бы мы спросили вас о том, под управлением какой операционной системы он работает, ...</p>
<>
<>
<>
<div class="col-12" style="margin-bottom: 0.5rem">
<div class="card bg-dark">
<div class="card-body">
<h4 class="card-title"><a href="/Programmy/genepatop-gpafika-dezhupstv.html">Генератор графика дежурств</a></h4>
<p class="card-text">Грамотное построение графика работ для сотрудников любых учреждений, требует решения оптимизационной задачи. Это проблемы оптимального распределения ресурсов и планирования. Вручную составить ...</p>
<>
<>
<>
<div class="col-12" style="margin-bottom: 0.5rem">
<div class="card bg-dark">
<div class="card-body">
<h4 class="card-title"><a href="/Stati/vidi-prikladnih-program.html">Виды прикладных программ</a></h4>
<p class="card-text">В этой статье хотелось бы поговорить о том, какими бывают прикладные программы, а так же какие прикладные задачи можно решить с ...</p>
<>
<>
<>
<div class="col-12" style="margin-bottom: 0.5rem">
<div class="card bg-dark">
<div class="card-body">
<h4 class="card-title"><a href="/Stati/oshibki-programmistov.html">Ошибки программистов</a></h4>
<p class="card-text">Перед вами несколько распространённых ошибок, которые совершают не только начинающие программисты, но и опытные разработчики программного обеспечения. Некоторые из них приводили ...</p>
<>
<>
<>
<div class="col-12" style="margin-bottom: 0.5rem">
<div class="card bg-dark">
<div class="card-body">
<h4 class="card-title"><a href="/Programmy/repost-counter.html">Подсчет количества репостов Вконтакте</a></h4>
<p class="card-text">Наверное, каждый из Вас знаком с социальной сетью Вконтакте. Эта сеть пользуется большим спросом у пользователей из России и стран СНГ ...</p>
<>
<>
<>
<div class="col-12" style="margin-bottom: 0.5rem">
<div class="card bg-dark">
<div class="card-body">
<h4 class="card-title"><a href="/Programmy/udalenie-sobak.html">Удаление собачек из Вконтакте</a></h4>
<p class="card-text">Очередной пример прикладной программы для работы с социальной сетью Вконтакте. Ранее на нашем сайте уже размещалась программа по ...</p>
<>
<>
<>
<div class="col-12" style="margin-bottom: 0.5rem">
<div class="card bg-dark">
<div class="card-body">
<h4 class="card-title"><a href="/Programmy/primer-bazi-dannih.html">Пример простой базы данных</a></h4>
<p class="card-text">Одним из видов прикладных программ – является программы для работы с базами данных(БД), сложные программы для управления огромными объемами информации. На ...</p>
<>
<>
<>
<div class="col-12" style="margin-bottom: 0.5rem">
<div class="card bg-dark">
<div class="card-body">
<h4 class="card-title"><a href="/Stati/kak-najti-programmista.html">Как найти программиста?</a></h4>
<p class="card-text">Ни для кого не секрет, что от работы программиста на предприятии очень многое зависит. И рано или поздно встает вопрос – ...</p>
<>
<>
<>
<div class="col-12" style="margin-bottom: 0.5rem">
<div class="card bg-dark">
<div class="card-body">
<h4 class="card-title"><a href="/Stati/help-programmer.html">Почему нужна помощь программиста?</a></h4>
<p class="card-text">Безусловно, без программного обеспечения любая компьютерная техника это всего лишь набор радиодеталей в корпусе, использовать которую, возможно просто как элемент интерьера ...</p>
<>
<>
<>
<>
<>
<>
</aside>
<>
<>
<>

<>

<>

<hr />

<footer class="body-content">
<div class="row justify-content-between">
<div class="col-12 col-md-6 col-xl-3 card text-center BlockColumn">
<aside class="PanelBox">
<div class="PanelBoxHeader">
<h3>Заголовок блока</h3>
<>
<div class="PanelBoxBody">
<ul>
<li>Качественные прогрммы, прошедшие тестирование</li>
<li>Обратная связь, обсуждается каждый этап разработки</li>
<li>Каждый проект обсуждается индивидуально</li>
<li>Исполнительность, всегда доводим проект до конца</li>
<li>Работа по предоплате - обговаривается индивидуально</li>
<li>Сопровождение (обновление) программ - по договоренности</li>
<li>Постоянным заказчикам - скидки</li>
<li>Гарантия возврата средств (если была предоплата)</li>
</ul>
<>
</aside>
<>
<div class="col-12 col-md-6 col-xl-3 card text-center BlockColumn">
<aside class="PanelBox">
<div class="PanelBoxHeader">
<h3>Услуги программиста</h3>
<>
<div class="PanelBoxBody">
<ul>
<li>Парсинг (сбор) информации с открытых источников</li>
<li>Создание приложений с использованием баз данных</li>
<li>Создание программ для работы с соц.сетями (парсеры, грабберы)</li>
<li>Автоматизация работы с соц.сетями</li>
<li>Разработка программ для среднего бизнеса</li>
<li>Разработка конфигураций на платформе 1С</li>
<li>и многое много другое</li>
</ul>
<p style="text-align: center;"><span style="color: #ff6600;">Мы не занимаемся противозаконной деятельностью!</span></p>
<>
</aside>
<>
<div class="col-12 col-md-6 col-xl-3 card text-center BlockColumn">
<aside class="PanelBox">
<div class="PanelBoxHeader">
<h3>Контакты</h3>
<>
<div class="PanelBoxBody">

<ul>
<li>Телеграмм</li>
<li>Эл.почта</li>
<li>Обратная связь</li>
</ul>
<>
</aside>
<>
<div class="col-12 col-md-6 col-xl-3 card text-center BlockColumn">
<aside class="PanelBox">
<div class="PanelBoxHeader">
<h3>Полезные ссылки</h3>
<>
<div class="PanelBoxBody">
<p><a href="/" rel="nofollow" title="прикладные программы на заказ">Разработка прикладных программ для компьютера</a></p>
<p><a href="/stati" target="_self" rel="nofollow" title="статьи о программировании">Статьи на тему программирования</a></p>
<p><a href="/programmy" target="_self" rel="nofollow" title="примеры программ">Примеры прикладных программ</a></p>
<p><a href="/frilans" target="_self" rel="nofollow" title="какие услуги выполняет программист">Услуги программиста</a></p>
<p><a href="/kontakty" target="_self" rel="nofollow" title="связаться с программистом">Контакты</a></p>
<>
</aside>
<>
<>

</footer>

<script src="/Scripts/jquery-3.6.0.js"></script>

<script src="/Scripts/bootstrap.js"></script>

<script src="/Scripts/btnUp.js"></script>

</body>
</html>[/spoiler]

Val_Ery · 10-04-2021, 20:55:44

Цитата: alexburn от 10-04-2021, 10:20:54
Я так понимаю, что не хватает заголовков h1-h6

Доброго времени!
Не совсем так... Валидатор видит семантический тег, поэтому ожидает внутри него какой-либо заголовок. По типу

Код Выделить


<body>
  <article>
    <h1></h1>
  </article>
  <aside>
    <h4></h4>
  </aside>
</body>

Предположу, что в вашем примере ему не нравится
1) вложенные в статью хлебные крошки (хотя, это, скорее, не нравится мне)
2) вложенная в статью (тег article) боковая панель (aside); у вас получается, что заголовок h1 относится не только к самой статье, но и к доп. материалам (Будет интересно):

Код Выделить


<body>
  <article>
    <h1>«вовремя» или «качественно»?</h1>
    <aside>
      <h4>Будет интересно</h4>
    </aside>
  </article>
  <aside>
    <h4>Популярное</h4>
  </aside>
</body>

P.S. Решили редизайн сделать?

alexburn · 11-04-2021, 08:24:12

Цитата: Val_Ery от 10-04-2021, 20:55:44Решили редизайн сделать?

На новый движок переезжаю, соответственно и дизайн меняю. Сейчас пока крутится на joomla, переезжаю на ASP

alexakap · 11-04-2021, 09:00:41

Если сайт, который в подписи, то там на странице статьи вообще нет такого предупреждения https://validator.w3.org/nu/?doc=http://pro-coder.ru/stati/sroki-programs.html
А вот шрифт, который сливается с фоном есть http://prntscr.com/119ey35

alexburn · 11-04-2021, 10:13:13

Цитата: alexakap от 11-04-2021, 09:00:41Если сайт, который в подписи

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

alexakap · 11-04-2021, 10:29:44

Цитата: alexburn от 11-04-2021, 10:13:13
не-не-не, сайт в подписи - это сейчас крутится. который разрабатываю на замену - на локалке отлаживаю

Тогда структура должна быть как в первом коде вам выше написали. На сколько помню, в html5 article должен включать основное содержимое документа с загловками h1-h6 без навигации и других повторяющихся блоков в т.ч. динамических типа "Смотрите также"

alexburn · 11-04-2021, 10:46:22

Цитата: alexakap от 11-04-2021, 10:29:44На сколько помню, в html5 article должен включать основное содержимое документа с загловками h1-h6 без навигации и других повторяющихся блоков в т.ч. динамических типа "Смотрите также"

Спасибо большое, очень дельный совет!