Консультации и оценка качества html-вёрстки (бесплатно)

[Del]

w3c validation service в помощь

??

 

[vanya_vanya]

??

ЧТо "?"?!

http://validator.w3.org/

 

[Del]

vanya_vanya
К чему это было написано?

w3c validation service в помощь

 

[Patlatui]

Удаленный верстальщик часом никому не нужен?

 

[Stal™]

это потому что ссылки в меню имеют {display: table-cell;}, а IE7 такое не понимает. Пропишите так: {display: block; display: table-cell;} - тогда вначале применится block, а потом те браузеры что знают table-cell - применят его.
А вот выравнивание по вертикали по людски особо не сделаешь в IE7, но на такое можно забить.

Да ну? В ие7 нельзя сделать вертикальное выравнивание?)))))))) как минимум два варианта. С фиксированой высотой и с использованием ненапряжного экспрешна
ну... еще вопрос - зачем дисплей блок????

 

[Del]

В ие7 нельзя сделать вертикальное выравнивание?)))))))) как минимум два варианта. С фиксированой высотой и с использованием ненапряжного экспрешна

выравнивание по вертикали по людски особо не сделаешь в IE7

line-height, экспрешены, тройная вложенность блоков для позиционирования и прочее - это не по людски.

ну... еще вопрос - зачем дисплей блок????

тогда вначале применится block, а потом те браузеры что знают table-cell - применят его.

Без fallback будет вот так как сейчас: http://clip2net.com/s/2gsMd

 

[_KurT_]

Привет. Вот еще две странице, хотелось бы услышать вашу критику. Первый раз пробовал применять концепцию независимых блоков.
Левая колонка фиксированная, центральная и правая - тянутся.
http://aleks1n.ucoz.ua/webref/index.html
http://aleks1n.ucoz.ua/webref/maket.jpg
Фиксированный
http://aleks1n.ucoz.ua/callmedia/index.html
http://aleks1n.ucoz.ua/callmedia/maket.jpg

 

[Promise]

Добрый день! Подскажите, пожалуйста, верстала страницу на разных компьютерах. То дома, то на работе в перерыв. Установлены разные версии фотошоп. Резала макет то там, то там. Когда открыла готовую страницу на компьютере у свекрови, то на большом мониторе увидела, что те цвета, которые должны совпадать на странице, не совпадают. Наверно, по-умолчанию везде стояли разные настройки цветовой схемы, а я ничего не меняла и при выскакивании сообщений просто кликала "ок", так как не понимала разницы и толком по теме ничего полезного не нашла. Какие нужно сделать настройки, чтобы то, что задумал дизайнер, совпало с моей страницей?

 

[Del]

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

Смотрел только подход к построению CSS. Оба ваших примера - НЕ вёрстка независимыми блоками. Вы навешиваете стили на элементы, задавая им отдельные классы, но это не независимые блоки. Ваши блоки зависят от каскада, окружения и модификаторов (multiple classes). По css нельзя воссоздать структуру страницы, понять что является блоком, а что элементом, понять что где начинается и заканчивается.

Попробуйте внести правки в ваш сайт, вам придётся менять не только стили того блока, который вы правите. А это одна из крауегольных идей БЭМ.

Добрый день! Подскажите, пожалуйста, верстала страницу на разных компьютерах. То дома, то на работе в перерыв. Установлены разные версии фотошоп. Резала макет то там, то там. Когда открыла готовую страницу на компьютере у свекрови, то на большом мониторе увидела, что те цвета, которые должны совпадать на странице, не совпадают. Наверно, по-умолчанию везде стояли разные настройки цветовой схемы, а я ничего не меняла и при выскакивании сообщений просто кликала "ок", так как не понимала разницы и толком по теме ничего полезного не нашла. Какие нужно сделать настройки, чтобы то, что задумал дизайнер, совпало с моей страницей?

Надо смотреть макет, пришлите ссылку на PSD в личку.

добавлено

_KurT_ Почитай Виталино объяснение как создавался БЭМ, тут на наглядных примерах становится понятней: http://clubs.*****/bem/replies.xml?item_no=1398

 

[_KurT_]

Я пытался использовать не в полной мере такой БЭМ, как его используют и описывают в Яндексе. Для маленьких сайтов это же ведь не оправдано, правильно?

Ваши блоки зависят от каскада, окружения и модификаторов (multiple classes).

Это я уже и сам понял, но, что я делаю не правильно? К примеру на странице: http://aleks1n.ucoz.ua/callmedia/index.html под главной картинкой есть три похожих блока: The benefits, Starter packs и Sing up for our service. Как я размышляю: "они все одинаковые за исключением ширины, соответственно будет класс .borr который описывает все правила за исключением ширины и будет модификатор, т.е. класс .borr_middle или .borr_big, которые определяют его ширину соответственно, а так же может переопределить некоторые другие правила(у меня .borr_big margin переопределяет)". Так вот, мне надо просто модификаторы .borr_middle или .borr_big писать так:
.borr.borr_middle
.borr.borr_big
а не так как я написал, что бы стили не зависели от каскада или я вообще совсем не правильно мыслю и делаю? Или может просто кажется не правильным из-за того что не понятно где блок, а где модификатор?

 

[Del]

_KurT_
Сегодня, начал писать вам ответ подробный, что как, со ссылками на статьи-доклады Харисова и БЭМ-клуб Я.рушки, но не успел закончить. Завтра постараюсь дописать и отпостить.

 

[_KurT_]

_KurT_
Сегодня, начал писать вам ответ подробный, что как, со ссылками на статьи-доклады Харисова и БЭМ-клуб Я.рушки, но не успел закончить. Завтра постараюсь дописать и отпостить.

Жду с нетерпением

 

[Del]

_KurT_
Я жду ответа от БЭМ-Клуба Яндекса чтоб уточнить рекомендованность/разрешённость некоторых техник. Чтоб не посоветовать вам уже неправоверные по их мнению вещи.

 

[_KurT_]

Ну пока ждем ответ, у меня есть еще вопросы, касающиеся стоимости и времени на верстку макетов, а так же зарплаты верстальщиков. Собственно предварительный вопрос, ответите ли вы на них?

 

[Del]

Да отвечу.
У меня просто безумная неделя запланированных сверхурочных, начавшихся в прошлое воскресенье и пока лишь увеличивающихся.

 

[_KurT_]

Сколько получает в месяц по вашему мнению среднестатистический верстальщик в вакууме, новичок - только что прибывший на работу, с 2-х годичным опытом, ну и проработавший 5 лет.
Для начинающего верстальщика, сколько времени и денег в среднем занимает верстка одной главной страницы, к примеру простой:
http://aleks1n.ucoz.ua/callmedia/index.html , и сложной:
http://aleks1n.ucoz.ua/touragent/index.html
А так же меня интересует сколько времени и денег, опять же для начинающего верстальщика занимает верстка простого проекта, скажем главная страница:
http://aleks1n.ucoz.ua/callmedia/index.html ,
ну и + 3-5 внутренних страниц.

 

[Del]

Я пытался использовать не в полной мере такой БЭМ, как его используют и описывают в Яндексе.

В Яндексе сейчас пишут на BEMHTML, они генеряет html/css из BEMJSON. В полной мере - это когда BEM-Tools используются. А когда мы ручками пишем код в канонах БЭМ (и то отступая от них, т.к. не используем мы отдельные css для каждого блока и т.д.) - это как-раз и есть не в полной мере.

Для маленьких сайтов это же ведь не оправдано, правильно?

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

Это я уже и сам понял, но, что я делаю не правильно?

Существует два БЭМ:

1. верстка независимыми блоками
2. верстка абсолютно независимыми блоками

А у вас же - пока совсем не БЭМ. Почему? Посмотрим какие требования выдвигаетзадачи решает БЭМ:

• Доклад "БЭМ" на РИТ-2011:
  • видео:
  • слайды с субтитрами: http://vitaly.harisov.name/article/bem-rit2011.pdf
  • ранний подклад на пЯТЬнице: http://narod.ru/disk/16920640001/BEM.pdf.html
  • поздний на Я.Субботнике: http://cloud.github.com/downloads/bem/yasubbotnik-ekb/slides.pdf
• Первое официальное описание БЭМ (2 сентября 2011 года): Что такое БЭМ? : http://bem.github.com/bem-method/html/all.ru.html
• Актуальное официальное описание БЭМ: Что такое БЭМ? : http://bem.github.com/bem-method/pages/beginning/beginning.ru.html

1. Разделение кода на части, разделение ответственности
2. Повторное использование кода
3. Использование кода, не зная деталей его реализации
4. Масштабируемость, возможность поддержки, развития, роста проекта на многие годы вперёд

Решением этого стала БЭМ-методология. Краеугольным камнем её является понятие Независимого Блока.

Проблемой в CSS выступает каскад.
БЭМ - способ сделать каскадные таблицы стилей НЕкаскадными

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

Правила независимости блока:
1) для описания элемента используется class, но не id
2) каждый блок имеет префикс
3) в таблице стилей нет классов вне блоков

Вёрстка независимыми блоками - это изначальный, самый первый БЭМ: UAWeb2007: Виталий Харисов: "Вёрстка независимыми блоками": http://vitaly.harisov.name/article/independent-blocks.html

Дальше он развился в Абсолютно-Независимые-Блоки, изначально это было ради производительности, но потом так стали делать всё потому что удобно. Хотя ранее считали его избыточным, делили блоки на простые и составные и даже сейчас в Яндексе спорят о необходимости доводить АИБ до самых нижних нод.

В общем правоверным вариантом сейчас считается исключительно АИБ.

Но т.к. БЭМ - гибкая методология, то каждый адаптирует её по своему.
Можно совмещать АИБ и Независимые блоки с каскадом до элементов.

Что важно!

• Каскад должен использоваться только для элементов, не для блоков! Т.е. навешивать стили каскадом можно лишь на те сущности что не планируется куда-то скопировать, переместить, использовать отдельно от родительского блока.
• Не должно быть конфликтов стилей. Т.е. не должно быть стилей с одинаковыми названиями для разных элементов, что могут наложится. Или все имена классов - уникальные, или прячутся за каскадом. Остальное - стили вне блоков.

Где у вас ошибки?

1) Блоки не является независимыми по настоящему.

• Он может развалится если вы попробуете перенести его без изменений в другой проект.
• Он очень сильно зависит от изначальных установок. Не просто от окружения, а от изначальных установок.
  Смотрим что у него внутри:
  • .borr_caption - требует {margin: 0} у базовых элементов - заголовков. Нестандартное поведение, в общих стилях у заголовков могут быть/есть/должны быть отступы.
  • .benefits - требует {margin: 0;} и {list-style: none;}
  • ну вы поняли...

2) Есть стили для элементов внутри блока, имена которых могут потом вызвать конфликты. Стили не привязанные только к этому блоку, ни каскадом ни именованием. Вы создали много отдельных классов для отдельных элементов и написали им стили. Стили для элементов, того что находится внутри блоков. Эти стили могут с чем-то конфликтовать, могут быть перезаписаны... самое важное! - могут использоваться где угодно! Их страшно трогать! Это таки "стили вне блоков".

Как я размышляю: "они все одинаковые за исключением ширины, соответственно будет класс .borr который описывает все правила за исключением ширины и будет модификатор, т.е. класс .borr_middle или .borr_big, которые определяют его ширину соответственно, а так же может переопределить некоторые другие правила(у меня .borr_big margin переопределяет)". Так вот, мне надо просто модификаторы .borr_middle или .borr_big писать так:
.borr.borr_middle
.borr.borr_big
а не так как я написал, что бы стили не зависели от каскада или я вообще совсем не правильно мыслю и делаю? Или может просто кажется не правильным из-за того что не понятно где блок, а где модификатор?

Смотрите:

• БЭМ Клуб: Старые методы модификации
• Абстрактные блоки

Надеюсь стало понятней.
Чтоб вникнуть в идею, очень рекомендую ознакомится с:

1) Доклад Харисова c Я.Субботника в Минске 2012 "История создания БЭМ. Кратко, сбивчиво и неполно"

• Видео: http://video.*******.ua/users/ya-events/view/667/
• Слайды: http://download.*******.ru/company/experience/subbotnik/minsk_harisov.pdf

Многое станет понятно. Именно видео посмотрите.

2) Сравнение на конкретном примере, классического подхода к вёрстке и БЭМ:http://cloud.github.com/downloads/bem/yasubbotnik-ekb/slides.pdf (смотрите начиная с 18 слайда).

добавлено

Сколько получает в месяц по вашему мнению среднестатистический верстальщик в вакууме

От 600 грн (такая ЗП была у коллеги в её родном маленьком городке, пока она не приехала в Харьков).
До 6000$ ( http://rabota.ua/company1372297/vacancy4998897 )

новичок - только что прибывший на работу

Junior в небольшой компании в Харькове: 300-400$.
В Минске - аналогично.
В Киеве, Москве - затрудняюсь сказать, но больше.

с 2-х годичным опытом

Скорее "уровня middle", да? Потому что можно иметь и 10 лет опыта, но работать хреново. Мы говорим о человеке способном работать самостоятельно, качественно и знающем хотя-бы jQuery.

В небольших компаниях в Харькове - от 750-850$
В Минске - аналогично.
В крупных компаниях: от 1000-1300$ + куча плюшек типа длинного отпуска, мед. страховки, оплаты спорта и еды и т.п.
В Киеве - больше.

ну и проработавший 5 лет.

Можно 5-лет проработать и не знать что такое контекст форматирования блока. Поэтому условимся что говорим о senior'ах.

Всё что выше.
Смотря в каком городе и в какой компании.
Я не разговаривал на эту тему с коллегами-сеньёрами но исходя из http://jobs.dou.ua/salaries/ , вакансий в инете и предложений HR, это ЗП в районе 1800-2000$.

Для начинающего верстальщика, сколько времени и денег в среднем занимает верстка одной главной страницы, к примеру простой:
http://aleks1n.ucoz.ua/callmedia/index.html

День.
$10 час * 8 часов = 80$

и сложной:
http://aleks1n.ucoz.ua/touragent/index.html

Два дня.
Это не сложная страница, а обычная.
$10 * 16 = $160

А так же меня интересует сколько времени и денег, опять же для начинающего верстальщика занимает верстка простого проекта, скажем главная страница:
http://aleks1n.ucoz.ua/callmedia/index.html ,
ну и + 3-5 внутренних страниц.

1 день титулка + по 1/4-1/3 дня на внутряк.

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

 

[_KurT_]

Благодарю за ответ , но как всегда есть вопросы.

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

Я имел ввиду использование bem-tools, префиксов и той распределенной файловой структуры.

1) Блоки не является независимыми по настоящему.
Он может развалится если вы попробуете перенести его без изменений в другой проект.
Он очень сильно зависит от изначальных установок. Не просто от окружения, а от изначальных установок.
Смотрим что у него внутри:
.borr_caption - требует {margin: 0} у базовых элементов - заголовков. Нестандартное поведение, в общих стилях у заголовков могут быть/есть/должны быть отступы.
.benefits - требует {margin: 0;} и {list-style: none;}
ну вы поняли...

Да понял. Получается, что сейчас виной этому некоторые правила, которые прописаны в ресете. И получается, что в пределах данного сайта он является все таки независимым(не в полной мере конечно, как АНБ), так как на всем сайте использовался бы одинаковый ресет, но соответсвенно на любом другом сайте - скорее всего нет.

2) Есть стили для элементов внутри блока, имена которых могут потом вызвать конфликты. Стили не привязанные только к этому блоку, ни каскадом ни именованием. Вы создали много отдельных классов для отдельных элементов и написали им стили. Стили для элементов, того что находится внутри блоков. Эти стили могут с чем-то конфликтовать, могут быть перезаписаны... самое важное! - могут использоваться где угодно! Их страшно трогать! Это таки "стили вне блоков".

Как это не привязаны именованием? Вот по моему по имени они как раз и привязаны.
конфликтовать? каким образом ?
перезапсаны? вообще не понял о чем вы здесь ...
могут использоваться где угодно? тоже не понимаю что вы имели ввиду здесь.

Смотрите:
БЭМ Клуб: Старые методы модификации
Абстрактные блоки

Надеюсь стало понятней.

Да, конечно.

$10 час * 8 часов = 80$

Что, кхм? прям таки, у junoir-a рейт 10$/час? У Вас был такой рейт когда Вы были junior-ом?
Я сверстал данную страницу:
http://aleks1n.ucoz.ua/callmedia/index.html
за 18 часов и мне сказали что в принципе, для junior-а, это нормально. Разница больше чем в 2 раза, собственно вопрос - кто ошибается или в чем проблема?

Это не сложная страница, а обычная.

Покажите сложную

 

[Greggy]

Что, кхм? прям таки, у junoir-a рейт 10$/час? У Вас был такой рейт когда Вы были junior-ом?
Я сверстал данную страницу:
http://aleks1n.ucoz.ua/callmedia/index.html
за 18 часов и мне сказали что в принципе, для junior-а, это нормально. Разница больше чем в 2 раза, собственно вопрос - кто ошибается или в чем проблема?

а не до фига ли это 18 часов? где это вам сказали что норм?
8 часов это норм. это еще и потестить можно во всех браузерах. например в 7й иешке бг на инпуте уезжает при переполнении а в восьмой текст налазит на бгшку. некрасиво. та там вообще бред сверстан лишки захардкожены по высоте.
кто это педалил?

 

[_KurT_]

а не до фига ли это 18 часов? где это вам сказали что норм?
8 часов это норм. это еще и потестить можно во всех браузерах. например в 7й иешке бг на инпуте уезжает при переполнении а в восьмой текст налазит на бгшку. некрасиво. та там вообще бред сверстан лишки захардкожены по высоте.
кто это педалил?

Ну вот как раз за этим я пишу что бы узнать, какая разница где сказали.
Я педалил. Не забыл что я учусь только, че с наездами-то?