Ludwig Voltman

b- значит блок. Такой префикс используется в БЭМ и АНБ. В БЭМ очень полезен, когда большой сайт постепенно переводят на эту систему: видно, в каких частях кода новая методология используется, а в каких нет. Здесь в верстке он отличает блоки от, например, глобальных стилей (с префиксом g-) http://vitaly.harisov.name/article/independent-blocks.html

По-моему очень круто! А что за система организации стилей? По стилистике похожа на АНБ. 1) Контактный телефон вверху (We can help. Email or call +1-570-708-8788) я бы обернул в address 2) Внутри структурных тэгов (section, например) заголовки начинаются с h1. По крайней мере, так делают во всех примерах, которые я видел, хотя это создает дополнительные сложности со стилизацией заголовков 3) Зачем оборачивать текст div, если внутри текст? Может, лучше p? 4) По деградации: я посмотрел в IE7, все отображается хорошо. 5) В h1 я бы обернул логотип

Тут главное -- логическое деление. Оформление может быть очень разным.

Классы, как мне кажется, совсем не длинные и логика есть, я примерно также именую. Смотрел верстку по первой ссылке. Многих вещей не понял. 1) почему баннер сделан бэкграундом? Здесь, в отличие от предыдущего макета есть и логотип, и название компании. При печати, опять же, логотип должен присутствовать. Я бы сделал через img. Аналогичная штука и с изображением поводка. Акции кончаются, и когда человек захочет поменять картинку на изображение другого товара -- придется копаться в css. 2) почему каждому блоку присвоен класс clearfix? Чтобы задать float:left? Тогда зачем задавать его каждому блоку? Чтобы прописать clear:both? А зачем он нужен тем блокам, над которыми нет плавающих блоков (например тому же header)? Зачем делать блоки inline-block? 3) зачем в футере у некоторых блоков задано относительное позиционирование? Что оно здесь выполняет? 4) почему у wrapper задана height: 100%? Что это меняет? 5) почему в тэг <form> вложен простой див без стилей? 6) зачем оборачивать блоки текста в div, если есть более подходящий тэг p? 7) нашел ошибку, похожую на ту, что была в предыдущей верстке: сайт не располагается по середине экрана, опять справа есть небольшой отступ.

Мне кажется тут не все так просто :-) strong может быть как и чем то нереально важным, так и не важным, смотря внутри чего он стоит. Если в < html5 возможно и все более менее понятнее с семантикой, то в html5 мне кажется все куда запутаннее: смысл тега strong должен быть совершенно разным, когда он один на странице, без других тегов или когда он внутри, например article.) Хотя это только догадки :-) А "Мы гарантируем 100% конфедициальность..." - весьма важное предложение :-) Без @SelenIT не разобраться :-) Как я понял у <strong>'а может повышаться важность. Вот примерно такой (адский) пример был в спецификации: <strong>something importand and <strong>something VERY important</strong></strong>По поводу small и strong. Я думаю что они друг друга не исключают. small говорит что это что-то там юридическое, а strong говорит что это что-то важное. Можно, в принципе и так сделать: <strong><small>text</small></strong> Важный юридический текст.

Если верстать семантически, то это скорее small. small семантически используется для юридических замечаний (тех, что мелким шрифтом в конце пишутся) strong - это что-то нереально важное если делать без семантики, то можно использовать <b> - это просто текст с отличающимся оформлением.

Осмысленные имена для стилей, как я понимаю, это такие имена, в которых схватывается сущность стилизуемого элемента. В БЭМ, например, сущность блока понимают так: "имя блока должно говорить о том, что делает этот блок", т.е. сущностью является функция того или иного блока/элемента. Помимо сущности мы можем выделить явление. То есть конкретную реализацию сущности. Явлений много - сущность одна. В данном случае явлением является оформление. Оно динамично. Можно провести редизайн и внешне сайт с клоунами поменяется (т.е. изменится явление), но сущность его останется неизменной - он всё-равно останется сайтом о клоунах.

Div'ом делать не кошерно, не семантично. Используйте <strong>/<em>

1024х600. Вид не изменился. Попробуйте уменьшить окно браузера и картинка будет как у меня. Это из-за position: fixed, что-то не так.

Сижу с нетбука. У меня половина кнопки "отправить" ушла вниз, а полосы прокрутки нет.

Самый простой способ проверить надежность верстки -- уменьшить окно браузера. Верстка должна держаться, не разваливаться. Здесь -- разваливается. Я бы начал с min-width для body. 1) id с class вперемешку. Я бы даже сказал -- слишком много id. Я думаю, уместно будет задать id для основных блоков. Когда id задают картинкам и заголовкам, имхо, перебор. 2) background-color для wrap'a не распространяется на всю его длину. Это потому, что плавающие блоки в wrap'e вышли за его пределы. Блоку wrap нужно прописать overflow:hidden, чтобы он растянулся на всю длину включенных в него блоков. 3) процентные значения -- рискованная штука: нужно просчитать все возможные последствия. Например: я уменьшил окно и левая колонка в футере (которой записан адрес и которой задана ширина в 20%) вылезла за пределы футера, и появилась отвратительная белая полоса. Чтобы это убрать, нужно сделать то же самое, что и с врапом: прописать overflow:hidden для футера и заставить фоновую картинку повторяться не только по оси Х. А лучше отказаться от процентных значений, там где их можно избежать (это мое дилетантское мнение). 4) я бы избегал классов типа otstup, otstup-verh и т.п. Если дизайнер не накосячил с сеткой в макете, то все элементы блоков подчиняются определенной логике, а значит многие отступы можно задать через контекст (например, все p в блоке Х имеют такой-то отступ, или же, первый элемент в блоке Х имеет верхний отступ на 5 пикселей больше, чем остальные элементы в этом блоке и т.п.) 5) Не понял логику разметки в футере. Почему факс и и-мейл заключены в один тэг p, а телефону задан свой персональный тэг? Тут либо всё, и факс, и имейл и телефон заключить в тег p (а для переноса строки использовать <br> или фиксированную ширину блока), либо каждому контакту давать свой p.

Вчера день посвятил БЭМ. Все в принципе понятно, не так уж и сложно, правда код некрасивый получается. Сегодня что-нибудь заверстаю по новой методике и буду изучать MCSS Насколько я понял все методологии стремятся к минимизации каскада и специфичности. Просто уровень минимизации различный. Кто-то делит сайт на большие блоки и использует каскад в рамках этого блока, а кто-то параноидально рассматривает любой кусок текста как отдельный блог (БЭМ). Оптимально, как мне кажется, использовать каскад там, где вероятность изменения структуры минимальна. Но если хочется чтобы сайт "выдержал" самые извращенные изменения в структуре, то БЭМ -- как мне кажется -- лучший выбор. По сути главный аргумент против БЭМ -- то, что такая гибкость не нужна на маленьких сайтах, где сверстал и забыл.

Я тоже месяц назад начал изучать веб-программирование. Я для себя такой список книг составил: Классический CSS: 1) Макфарланд "Большая книга CSS" (почти прочитал) 2) Майер CSS - каскадные таблицы стилей: подробное руководство (почти то же самое, что и 1, буду читать выборочно - что не понял у макфарланда и чего у него не было в книге) 3) SelenIT, Psywalker "Инлайновый контекст форматирования" - чтобы понять логику поведения инлайновых элементов CSS3 Здесь я ещё не определился с вариантом: 1) CSS для вебдизайнеров -- очень кратко, только самые распространенные фишки CSS3. Можно за день прочитать. 2) Макфарланд CSS3: The missing manual. Эта на английском, книжка объемная, автор хороший. К новому году выйдет русский перевод. На озоне уже можно сделать заказ. Я думаю закажу -- как подарок на НГ HTML5 До него я пока не добрался, но буду выбирать из этих вариантов: 5.1. html5 для веб-дизайнеров (как и предыдущая книга этой серии -- очень кратко, только самое основное) 5.2. учебник Сухова (отзывы неплохие, прочитал страниц 20 для интереса -- написано неплохо, много чего интересного рассматривается) JQuery По этой теме, как доложила разведка, самая лучшая книга -- вот эта: jQuery. Подробное руководство по продвинутому JavaScript (Бибо, Кац).

Скриншоты делал с нетбука. Но на обычном компьютере то же самое. Бэкграунд растягивается на ширину экрана. Если уменьшить окно, то бэкграунд стянется на ширину окна. А когда отводишь прокрутку влево -- появляется белая полоса.

Кстати, вспомнил, на psd2cms.ru тоже верстают по БЭМу, может быть, там все делают грамотно. Вроде бы даже и шаблон сверстанный ими -- solitude -- где-то в сети лежит. Да, MCSS, я презентацию смотрел. Сначала интересно было, потом я потерял нить повествования. Не понимаю этот формат видеоконференций -- смотреть неудобно. Наверняка ведь у оратора есть письменный текст произнесенной речи. То, что можно вдумчиво прочитать за 10 минут приходится слушать 30 минут. В комментариях на хабре один пользователь писал, что собирается провести сравнительный анализ методологий, возможно, скоро появится новая статья - будет интересно почитать.

Тема любопытная, сам сейчас присматриваюсь к различным методологиям. На хабре несколько новых статей на эту тему появилось, правда аргументы у сторон одни и те же (в одной из новых статей автор очень точно изобразил диалог бэмера и фаната самантики). Да и сайтов, сверстанных по бэму отцами методологии, я не находил. А то, что якобы по БЭМу (на хабре была статья, где автор сверстал шаблон corporate blue по БЭМу), на самом деле -- как говорят -- не совсем по БЭМу. В общем -- пытаешься найти ответы на вопросы, а получаешь новые вопросы. Думаю уделить несколько дней вдумчивому изучению методики, может, прояснится.

Можно и так сделать, но не будет работать в IE7 и 8. http://htmlbook.ru/samlayout/verstka-na-html5/novye-tegi А если без них обходиться то не модно, не прогрессивно, не семантично Я просто подумал, что м.б. что-то новое придумали с момента выпуска статьи, все-таки 2 года прошло.

Ну, например, вот так: <header><div class="header"><h1>SITENAME</h1></div></header> А не так: <header><h1>SITENAME</h1></header>

1. Шрифт определяется через photoshop. Нужно кликнуть по кнопке "написание текста" (буква Т) и навести курсор на текст. В окошке появится использованный шрифт, размер, межстрочный, межбуквенный интервал и т.п. 2. Про градиент - действительно, для a:hover градиент прописан. а для панели навигации? Скину ссылку для сравнения: навигационная панель из макета и эта же панель на твоей верстке. http://i.imgur.com/sm9Ig5e.jpg С шириной все хорошо, дело в высоте. Вот как отображается макет, если добавить туда больше текста: http://i.imgur.com/mg0m6Zy.jpg Проблема осталась. Всё-таки лучше делать через div. http://prntscr.com/28fn24

Новые теги html5 (<header>, <section>, <footer>, <article> и др.) позволяют добавить семантичности верстке и разнообразить привычные div'ы. Однако не все браузеры корректно воспринимают эти теги. Вот что написано на сайте: Верстальщик на распутье. Что же делать? 1) Заставить IE (вплоть до 6 версии) воспринимать новые теги можно через небольшой JS (подробнее здесь). Сомнение: а что если у пользователя выключены JS? 2) Можно использовать новые теги, но не присваивать им стилей. По сути будет обычная divовая верстка с дополнительными семантическими тегами. 3) Можно просто не использовать новые теги, тогда и проблемы не возникнет 4) А ещё можно просто забить на старые браузеры и присваивать стили новым тегам. Вопрос у меня такой: Какой из четырех вариантов кажется Вам самым разумным? Может быть, есть какие-то другие варианты решение проблемы со старыми IE?

Тоже решил сверстать этот макет из любопытства. Обнаружил любопытное поведение background'a в firefox, если задать его расположение по центру при масштабировании (я пытался лого сделать бэкграундом - не получилось). Спрошу потом на форуме. В новых тегах я плохо разбираюсь вот ещё порция критики по макету: 1) в оригинальном макете используются 3 разновидности нелегального шрифта myriadpro (regular, bold, semi-bold). Верхнее меню и a:hover в меню сделаны градиентом. Здесь этого нет. 2) слишком сложно сделана горизонтальная колонка под меню (там, где 3 картинки с текстом). Картинки я бы сделал через img, а не через background. Кроме того, при добавлении текста в эти колонки (туда, где написано "комплексная разработка", "строительные работы" и т.п.) текст перекрывает картинку, и залазит на колонку, которая идет ниже. Кроме того в макете ссылка "подробнее" (если не ошибаюсь) расположена справа, а не слева. 3) Три верхних колонки с картинками одинаковы. 3 отдельных класса не нужно, можно обойтись одним. 4) если мы добавим текст в div с классом content2, то этот текст полезет вниз и перекроет нижнюю навигационную панель и футер. Аналогичный баг происходит с div с классом text. Нужно убрать фиксированную высоту отовсюду, где это возможно 5) косяки с логотипом остались те же. Я ошибся с background'ом. В firefox он ведет себя непредсказуемо. Но вполне можно засунуть background в отдельный див (я сделал так) 6) ну и так, перфекционизм: мне кажется, что <br> в верстке лучше не использовать, т.к. он относится к дизайну, а не к информации, а значит ему не место в html. Перенос строки можно сделать путем комбинации блочного и строчного элементов, а также через фиксированную ширину.

Если добавить ещё немного текста в блок со статьями, то этот блок не растянется, а текст пройдет через него и спрячется за нижний блок. Некоторые вещи не понял. 1) зачем давать такое именование div#wrapper когда можно просто #wrapper? 2) зачем создавать отдельный див со свойством clear:both, если можно присвоить это свойство другому блоку?

На большом экране смотрится нормально. На нетбуке (1200х600, вроде бы) нет. Если на большом экране окно уменьшить, то панель навигации и основной контент будут прижаты к левому краю, не будут по центру.

В новых тегах разбираюсь плохо. Просто про верстку напишу. 1) Первое, что бросается в глаза - горизонтальная прокрутка и большой отступ справа. Это из-за того, что логотип вложен в враппер, причем ширина логотипа больше ширины враппера. 2) Зачем врапперу задана статичная высота (height)? Это относится и к некоторым другим divам 3) Разметка шапки мне показалась очень сложной. Я бы иначе нарезал макет. Левая и правая часть логотипа (а это один и тот же рисунок) может быть зациклена. Я бы вырезал эту часть и назначил её как body {background url(...) repeat-x; Среднюю часть логотипа (с домом и облаками я бы включил как отдельный блок в wrapper, а телефон спозиционировал относительно окна браузера. В вашем варианте если экран монитора будет шире логотипа - изображение с домом будет дублироваться. 4) В оформлении классов лучше избегать сочетания строчных и прописных букв если нет специальной системы организации классов

Попробуйте уменьшить ширину окна браузера, прокрутите горизонтальный ползунок до конца и увидите, что оранжевая полоска в хедере не растягивается на всю ширину окна. Проблема эта решится, если вы зададите классу header-wrap свойство min-width: 650px (т.е. равное ширине основного блока с контентом). Если интересно, почему блок ведет себя так, вот тема, я недавно как раз это спрашивал. http://htmlforum.ru/index.php?showtopic=46636#entry311295