Оцените первую учебную верстку

[gregsv]

Всем добрый день!

Сверстал главную страницу учебного сайта. http://ratmir.zg5.ru/

Прошу оценить код и как сверстано. Буду рад если скажете, на что следует в дальнейшем обратить внимание

Макет взят на этом форуме в разделе Для начинающих/Макеты для верстки/Макет 1

Edited May 22, 2013 by gregsv

[red4pony]

В каком-то смысле сайт является следующим этапом развития htmlbook.ru, поэтому его можно взять за основу. При этом webreference.ru ориентирован на более широкую аудиторию и не зацикливается на теме HTML.

[gregsv]

Текст взят с макета (Макеты для начинающих/макет1)

[klierik]

<ul class="menuHeader">

Не использовать заглавные буквы. Правильно: "menu-header"

<ul class="menuHeader">
<li><a href="#"><img src="images/home.gif" alt="На главную страницу" title="Главная страница"></a></li>
<li><a href="#"><img src="images/contact.gif" alt="Контакты" title="Контакты"></a></li>
<li><a href="#"><img src="images/mapSite.gif" alt="Карта сайта" title="Карта сайта"></a></li>
</ul>

Картинки тут удобнее в спрайт объеденить.

<form id="searchNav" action="/">
<fieldset>
<label>Поиск по сайту</label>
<p><input type="search" name="find"></p>
<button type="submit" value=""><img src="images/search.gif" alt="" /></button>
</fieldset>
</form>

Не использовать ID для описания стилей блока. Для этого существуют классы. Я могу аргументиовать почему это так, но мне. честно говоря, влом, так как я это делал много раз. Просто запомни - все в разметке должно стилизированно через классы.

nav ul {
position: absolute;
display: table-row;
}

У тебя есть ".menu", зачем отталкиватся от селектора?

[font=monospace][size=1]<div class="clear">[/size][/font][font=monospace][size=1]</div>[/size][/font]

Этот подход изжил себя в начале тысячелетия. Пример более подходящего решения в LESS:

// Clearfix
// --------
// For clearing floats like a boss h5bp.com/q
.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
// Fixes Opera/contenteditable bug:
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
line-height: 0;
}
&:after {
clear: both;
}
}

<p class="next"><a href="#">далее...</a></p>

Использование "<p>" в данном случае избыточно и не логично. Правильнее скорее использовать "<div class="next">". Почему? Да потому что текст "далее..." ну никак не ассоциируется у меня с абзацом.

<section class="lastArticles">
<p><a href="#">Интересующихся процессом создания интернет-ресурсов.
В каком-то смысле...</a></p>
<p class="next"><a href="#">далее...</a></p>
</section>

<section class="lastArticles">
<p><a href="#">Cайт является следующим этапом развития htmlbook.ru поэтому его можно...</a></p>
<p class="next"><a href="#">далее...</a></p>
</section>

<section class="lastArticles">
<p><a href="#">При этом webreference.ru ориентирован на более широкую аудиторию и
не зацикливается...</a></p>
<p class="next"><a href="#">далее...</a></p>
</section>

Весь этот код должен быть списком ибо это и есть список последних статей.

<section class="reclama">

Для имен классов лучше англоязычные термини вместо гребанного транслита. Вот тебе пример со списком терминов: http://translate.goo.../#ru/en/реклама

Более того, имя должно быть краткое, но не сокращенное. Должно описывать логическую или функциональную особенность блока/элемента. Должно быть понимаемое и давать представление о том что этот блок описывает и содержит.

Оценку ставить не буду, ибо тут и так все понятно.

[gregsv]

Спасибо, за советы. Буду править )))

есть только несколько вопросов:

Я ставил <div class="clear"></div>, чтобы отменить обтекание, посколькув литературе и различных уроках видел только такой подход и overflow: hidden. Значит этот метод устарел?

C Less-ом не сталкивался. Наверно придется посмотреть что это

Весь этот код должен быть списком ибо это и есть список последних статей.

Использование section взял отсюда http://htmlbook.ru/s...tml5/novye-tegi

Если не сложно, объясните, в каких случаях тогда надо использовать тег section?

Edited May 13, 2013 by gregsv

[klierik]

1. не совсем понял о чем именно ты. ты скопировал пустой текст.

2. если логическое представление данных это -- список, абзац, таблица, прочее в таком случае используется соответствующий тег (ul/ol, p, table, ...). Если тебе просто надо поместить данные в блок, то лучше подойдет div или section.

Я кладу в section блоки со своей структурой. а все остальные его составные раскидываю в div.

наглядний пример: http://jsfiddle.net/klierik/hrt2x/ (смотри только исходный код, так как там в перемешку с php)

[gregsv]

По первому пункту. Я ставил <div class="clear"></div>, чтобы отменить обтекание, посколькув литературе и различных уроках видел только такой подход и overflow: hidden. Как я понимаю, ты предлагаешь его заменить использовав LESS. Получается, что подход с clear устарел? Или я что-то не так понял?

[klierik]

По первому пункту. Я ставил <div class="clear"></div>, чтобы отменить обтекание, посколькув литературе и различных уроках видел только такой подход и overflow: hidden. Как я понимаю, ты предлагаешь его заменить использовав LESS. Получается, что подход с clear устарел? Или я что-то не так понял?

нет. я скопировал из LESS файла подход. Это просто формат запись.

В CSS это так:

.clearfix{*zoom:1}
.clearfix:before,
.clearfix:after{display:table;content:"";line-height:0}
.clearfix:after{clear:both}

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

[gregsv]

Теперь понял. Спасибо

[gregsv]

Мне тут еще подсказали, что блок с рекламой пщщпду лучше не верстать, Это действительно так или при верстке это все равно нужно делать? И если делать, то тоже списком?

Edited May 13, 2013 by gregsv

[klierik]

не понятно что имеется ввиду

[gregsv]

вроде реклама от google вставляется специальным кодом и отдельно верстать рекламу не нужно.

[klierik]

а, это само собой так и есть.

но в нашем случае дело не в самой рекламе, а в том как оформлена разметка.

уж поверь мне, тут на форуме емть и мой говнокод написанный лет так 5ть назад и мне говорили аналогичные вещи

в начале это не особо понятно почему надо делать именно так, но оно так и есть )

если ты сможешь твроить код, который будет легко читатся и восприниматся другим разработчиком (back-end, front-end) то ты тем самым сэкономиш себе и другим много не только времени (время == деньги) но и нервы.

[gregsv]

Когда стал делать иконки в шапке через спрайты, столкнулся с тем, что background-position срабатывает только если дополнительно в свойствах указать класс списка (т.е. .menu-header .contact-icon, а не просто .contact-icon)

Почему так происходит? Ведь по идее класс у конкретного пункта прописан и свойства должны нормально отображаться

Кусок кода выложил здесь

http://jsbin.com/ubikid/1301/

[exeto]

1. При уменьшении окна браузера появляется скролл, а меню продолжает сжиматься.

2. В хроме пункт меню "Веб-программирование" разделяются на две строки

3. Текст мутный какой-то.

4. Стили не в UTF-8

5. Ссылки не меняют свое состояние при наведении.

[gregsv]

2. В хроме пункт меню "Веб-программирование" разделяются на две строки

Если меню делать резиновым, то хром и сафари задают одинаковую ширину ячейкам. Не нашел способ это изменить, если только делать через float. Но тогда меню будет не таким гибким, если потребуется в дальнейшем добавить еще пункты.

Текст мутный какой-то.

делал по макету (Макеты для начинающих/макет1). Можно попробовать тень у текста убрать

4. Стили не в UTF-8

В css файле это надо непосредственно указывать. Нигде не встречал как в нем задавать кодировку. Можете подсказать?

5. Ссылки не меняют свое состояние при наведении.

Действуют как обычные ссылки. Как они должны меняться при наведении?

[exeto]

Если меню делать резиновым, то хром и сафари задают одинаковую ширину ячейкам. Не нашел способ это изменить, если только делать через float. Но тогда меню будет не таким гибким, если потребуется в дальнейшем добавить еще пункты.

Но ведь не дело когда едет верстка меню в одном из самых массовых браузеров. Есть и другие способы, вот один из них.

делал по макету (Макеты для начинающих/макет1). Можно попробовать тень у текста убрать

В макете тени нет, не думаю что заказчикам отсебятина нравится.

В css файле это надо непосредственно указывать. Нигде не встречал как в нем задавать кодировку. Можете подсказать?

Сохранять файл стилей в правильной кодировке, вот еще почитайте.

Действуют как обычные ссылки. Как они должны меняться при наведении?

Хотя бы цвет менять.

Edited May 19, 2013 by exeto

[gregsv]

Спасибо за советы. Буду править

[gregsv]

Постарался все поправить. Отредактированный файл здесь http://webreference.besaba.com/

Меню попаравил другим способом. Добавил white-space. Если делать через inline-box, то между пунктами остается расстояние, а это противоречит макету.

Какие еще будут замечания? Что улучшить? А то я подумываю с него портфолио начать )))

[red4pony]

Не использовать заглавные буквы. Правильно: "menu-header"

Я думаю это Ваше "правильно"(а именно привычка и стандарт именования в Вашем круге профессионального общения). БЭМу привет.

Я буду опять за свое. Именование классов не должно(так советуют гуру, семантика и удобочитаемость кода), что имена классов/идентификаторы должны отражать суть объекта, его предназначение, роль, функцию. А не "зеленый блок справа", что отражает его внешний вид и положение(оба могут поменяться). К слову и футер не обязательно должен быть внизу страницы.

У Вас <section class="block"> лежит в одном ЛОГИЧЕСКОМ контейнере с рекламой. Что между ними общего? Считается что верстальщик - это ругательство(прошу без флейма, если будет необходимость создайте для этого отдельную тему). Веб-мастер, веб-дизайнер, веб-разработчик, но ни как то "слово". Вы же должны не просто раскидать элементы по странице, но и построить логику строения сайта (для роботов, читающих браузеров - об этом мало кто заботится, для себя любимого/коллег).

А то я подумываю с него портфолио начать )))

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

Простите если был слишком категоричен и резок.

[gregsv]

А по самой верстке какие замечания?

[red4pony]

Вот

У Вас <section class="block"> лежит в одном ЛОГИЧЕСКОМ контейнере с рекламой. Что между ними общего?

Вот

Именование классов не должно быть привязано к чему либо(так советуют гуру, семантика и удобочитаемость кода), что имена классов/идентификаторы должны отражать суть объекта, его предназначение, роль, функцию. А не "зеленый блок справа", что отражает его внешний вид и положение(оба могут поменяться)

(sidebar-left, sidebar-right)

Вот

Вопрос эластичности, адаптивности не решен.

P.S. В логотип бы заголовки вложить

P.S.S. menu-bar при :hover состоянии, всплывающие надписи не удобны (и смещены относительно соответствующего значка). Может их расположить в одну строчку(при наведении естественно)?

[gregsv]

menu-bar при :hover состоянии, всплывающие надписи не удобны (и смещены относительно соответствующего значка). Может их расположить в одну строчку(при наведении естественно)?

Меня смущает, что тогда будут перекрывать другие иконки. Поэтому и сместил

[red4pony]

Меня смущает, что тогда будут перекрывать другие иконки. Поэтому и сместил

Уберите data-title и вложите в ссылку <span>(ну или любой элемент на Ваш вкус), абсолютно спозиционируйте его, скройте. А при наведении пусть появляется. Код станет чуть больше, но это даст Вам больше контроля.

[gregsv]

Спасибо за совет. Поправлю.

А блоки партнерок внизу как лучше сделать: оставить картинками или правильней будет сделать background-ом? Стоит ли во втором случае использовать спрайт?