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

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем alexsofdev, 6 фев 2013.

  1. alexsofdev

    alexsofdev

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

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

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    559
    Для оценки качества верстки, нужно знать хотя бы теги и уметь тестировать различными браузерами макет.
     
  3. qwertyqwert

    qwertyqwert

    Регистрация:
    13 ноя 2012
    Сообщения:
    1
    Симпатии:
    0
    некоторые используют валидатор для проверки ошибок html и css, правда он на английском
    http://validator.w3.org/
     
  4. mordik

    mordik

    Регистрация:
    26 дек 2012
    Сообщения:
    9
    Симпатии:
    0
    1. Правильное отображение сайта.
    2. Кроссбраузерность.
    3. Удобочитаемый HTML и CSS код.
    4. Семантика (семантика стоит после удобочитаемости потому, что ее сложно оценить, если код неудобочитаем).
    5. Чистота кода.
     
  5. alex_storm

    alex_storm дизайн, CSS Команда форума

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

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.349
    Симпатии:
    1.380
    ну и как минимум стоит еще верстать валидно. Как написали выше:
     
  7. alexsofdev

    alexsofdev

    Регистрация:
    13 янв 2013
    Сообщения:
    239
    Симпатии:
    46
    семантика и чистота это слишком субьективные понятия. Есть что-то более конкретное?
     
  8. saxum2010

    saxum2010

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

    alexsofdev

    Регистрация:
    13 янв 2013
    Сообщения:
    239
    Симпатии:
    46
    Ога, чичаз. Вы еще скажите что нет разницы между табличной версткой и версткой на дивах. Валидатор ведь прохавает, а чё там.
     
  10. saxum2010

    saxum2010

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

    alexsofdev

    Регистрация:
    13 янв 2013
    Сообщения:
    239
    Симпатии:
    46
    Про беду этих курсов я уже говорил выше. Особо мне запомнились варианты типа работы со вложенными тегами. Ну вот банально, есть

    Код:
    <div class="sidebar">
    <h2 class="sidebar">Привет, черти!</h2>
    <p>Это были все новости на сегодня, а теперь о погоде</p>
    </div>
    
    Естественно мы имеем стили div.sidebar и h2.sidebar. Валидатор пропустит, кроссбраузерность - порядок. А страница медленно, но уверенно превращается в свалку. Почему? Потому что стили названы css не просто так, и по норме надо делать не такой хлам

    Код:
    div.sidebar {
    }
    h2.sidebar {
    }
    
    А вот такой:

    Код:
    div.sidebar {
    }
    .sidebar h2{
    }
    
    И все! Уже не надо каждому элементу прописывать класс. Размер страницы меньше, загрузка быстрее, код чище.
     
  12. IvanCo

    IvanCo

    Регистрация:
    23 дек 2012
    Сообщения:
    56
    Симпатии:
    5
    Сначала надо выработать набор правил - что хорошо, а что плохо. Уверен, там окажется много именно субъективных критериев качества, а что-то вполне общепринятое в набор не войдет. И уже на основании этого набора правил искать (или самостоятельно писать) верификатор. Например, с моей точки зрения код
    не является грамотным русским языком. А кого-то - вполне устроит:wink:
     
  13. alexsofdev

    alexsofdev

    Регистрация:
    13 янв 2013
    Сообщения:
    239
    Симпатии:
    46
    > Сначала надо выработать набор правил
    Это называется "изобретать колесо заново" ака "reinventing the wheel". Вначале обычно спрашивают какие правила существуют на текущий момент, с чем собственно я и пришел.
     
  14. IvanCo

    IvanCo

    Регистрация:
    23 дек 2012
    Сообщения:
    56
    Симпатии:
    5
    Тогда, видимо, следовало поработать над формулировкой вопроса. А то слово "как" имеет много значений, включая весьма забавные:Smile:

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

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

    alexsofdev

    Регистрация:
    13 янв 2013
    Сообщения:
    239
    Симпатии:
    46
    Кто-то может рассказать что такое "семантика"? А то упоминается уже десяток раз, а я все никак не осилю.
     
  16. trebarim

    trebarim

    Регистрация:
    9 фев 2013
    Сообщения:
    42
    Симпатии:
    10
    семантика - это когда тэги используются по их прямому назначению <p> для абзацев , <h1> для заголовков и никак не наоборот.
     
  17. sitecreator

    sitecreator

    Регистрация:
    1 фев 2013
    Сообщения:
    291
    Симпатии:
    65
    никакой разницы для конечного пользователя и заказчика.
    Это я как исполнитель выбираю как мне удобнее сверстать. и та и другая может быть правильной, а может быть с ошибками.
    Это все равно, что сравнивать автомобили переднеприводные и заднеприводные. и при этом смотреть не на качество, а пытаться оценить какая модель привода (передняя или задняя) лучше.
     
  18. alexsofdev

    alexsofdev

    Регистрация:
    13 янв 2013
    Сообщения:
    239
    Симпатии:
    46
    и тем не менее, разница есть. Заключается, как минимум, в качестве и скорости индексации контента.
     
  19. sitecreator

    sitecreator

    Регистрация:
    1 фев 2013
    Сообщения:
    291
    Симпатии:
    65
    это при табличной и div-ной верстке?

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

    alexsofdev

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

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