[Помогите] Как оценить качество верстки

Я имею кое-какие познания верстки и лично меня тошнит от многих видео и текстовых материалов по обучению верстке. К примеру вот тут вам надо сделать большой текст, ну так гуано вопрос, давайте перепилим стили h1 так, чтобы тут все выглядело ***дато. А то что при этом ползет на другой странице - а кого волнует. И потом появляется на свет пачка горе-верстальщиков, у которых вместо простого и понятного кода на 2 килобайта вылазит файлик под 150 килобайт, в котором костыль на костыле и сам сайт становится карточным домиком - чуть тронули страничку и он рухнул.

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

 

Для оценки качества верстки, нужно знать хотя бы теги и уметь тестировать различными браузерами макет.

 

некоторые используют валидатор для проверки ошибок html и css, правда он на английском
http://validator.w3.org/

 

1. Правильное отображение сайта.
2. Кроссбраузерность.
3. Удобочитаемый HTML и CSS код.
4. Семантика (семантика стоит после удобочитаемости потому, что ее сложно оценить, если код неудобочитаем).
5. Чистота кода.

 

Вы понимаете о чем Вы пишете? - это стандартные правила. Только Вы забыли уточнить некоторые моменты
1. Правильно отображение сайта - для каких устройств и дисплеев?
2. Кроссбраузерность - для каких платформ и браузеров?
3. Удобочитаемый код - если человек вообще не знает код, как он его будет читать?
И .т.д.. Если человек не знает код, он не сможет оценить насколько он правильно написан, чист и т.п.
Без знаний, я говорю, что верстку оценить можно только внешне и не более.

 

семантика и чистота это слишком субьективные понятия. Есть что-то более конкретное?

 

а что Вам нужно? - сервис на который загрузил ссылку, а он в ответ сайт классный, таких нет. Можно только используя http://validator.w3.org/ и другие сервисы проверить чистоту кода согласно стандартам, через http://browsershots.org/ и похожие сервисы - как сайт отображается на различных браузерах. А красота так вообще субъективный параметр, сколько людей столько и мнений.

 

Ога, чичаз. Вы еще скажите что нет разницы между табличной версткой и версткой на дивах. Валидатор ведь прохавает, а чё там.

 

Все зависит от макета, некоторые приверженцы блочной верстки очень мудрят когда можно легко и просто использовать таблицу. Так что не надо бросаться в крайности.
А насчет Тестирование под браузерам так это самый правильный способ.
alexsofdev Могу предложить курс Jeffrey Way - https://tutsplus.com/course/30-days-to-learn-html-and-css/ В этом курсе разъясняется подробно

 

Про беду этих курсов я уже говорил выше. Особо мне запомнились варианты типа работы со вложенными тегами. Ну вот банально, есть

Код:

<div class="sidebar">
<h2 class="sidebar">Привет, черти!</h2>
<p>Это были все новости на сегодня, а теперь о погоде</p>
</div>

Естественно мы имеем стили div.sidebar и h2.sidebar. Валидатор пропустит, кроссбраузерность - порядок. А страница медленно, но уверенно превращается в свалку. Почему? Потому что стили названы css не просто так, и по норме надо делать не такой хлам

Код:

div.sidebar {
}
h2.sidebar {
}

А вот такой:

Код:

div.sidebar {
}
.sidebar h2{
}

И все! Уже не надо каждому элементу прописывать класс. Размер страницы меньше, загрузка быстрее, код чище.

 

Сначала надо выработать набор правил - что хорошо, а что плохо. Уверен, там окажется много именно субъективных критериев качества, а что-то вполне общепринятое в набор не войдет. И уже на основании этого набора правил искать (или самостоятельно писать) верификатор. Например, с моей точки зрения код

не является грамотным русским языком. А кого-то - вполне устроит

 

> Сначала надо выработать набор правил
Это называется "изобретать колесо заново" ака "reinventing the wheel". Вначале обычно спрашивают какие правила существуют на текущий момент, с чем собственно я и пришел.

 

Тогда, видимо, следовало поработать над формулировкой вопроса. А то слово "как" имеет много значений, включая весьма забавные

Желательна валидность (проверяется программно). Желательна семантичность (проверяется глазами). Относительная эффективность тех или иных конструкций также проверяется только человеком, при наличии должной квалификации и понимания задачи. Хороший верстальщик - немножко хороший программист, и методы проверки его работы во многом схожи с контролем программного кода, где автоматизация проверки возможна только в самых общих моментах.

Что касается огородов, которые верстальщик может нагородить со стилями (приведенный пример с sidebar показателен), то эти индусизмы могут носить не системный характер, а быть следствием многократного переписывания и отладки одного и того же кода. Но могут быть следствием склонности верстака к бездумной работе. Это, опять же, надо смотреть индивидуально.

 

Кто-то может рассказать что такое "семантика"? А то упоминается уже десяток раз, а я все никак не осилю.

 

семантика - это когда тэги используются по их прямому назначению <p> для абзацев , <h1> для заголовков и никак не наоборот.

 

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

 

и тем не менее, разница есть. Заключается, как минимум, в качестве и скорости индексации контента.

 

это при табличной и div-ной верстке?

Вы это где то прочитали?
Контент - он на то и контент, что никак не связан с тегами и стилями.
или по вашему и стили влияют на индексацию? Я, конечно, не рассматриваю крайний случай уродства, когда шрифт белого цвета на белом фоне задан.
вы еще напишите, что "качество и скорость индексации" зависит от типа документа, тогда скажите, "что лучше": HTML 4.01, XHTML 1.0 или HTML 5.0?

 

> Я, конечно, не рассматриваю крайний случай уродства, когда шрифт белого цвета на белом фоне задан.
Этот случай рассматривал гугл, когда сео-умники начали сео-текст делать невидимым для посетителей. И, естественно, исключать из индексации. Не помню правда чем закончилось, дело двухлетней давности.

> Контент - он на то и контент, что никак не связан с тегами и стилями.
только для человека