Тестовое задание для верстальщика

[Zhuchok]

Здравствуйте. Прошу оценить верстку. Это тестовое задание для трудоустройства. Требований к верстке особых не было, кроме кросбраузерности ie7+. К сожалению в работе мне отказали, но не пояснили, что я сделал плохо. Прошу ваши замечания и советы.

P.S. Элемент select в хедере не стилизовал, так как пока мало знаком с js и jquery, а на css кроссбраузерно не получилось.

Edited July 30, 2013 by Zhuchok

[Zverushka]

Я не профи, но выскажу несколько мыслей. Они могут быть ошибочными. Если так - поправьте.

Ну то, что макет на несколько пикселей не совпадает с версткой - это ладно.

Почему 2 хедела в теле боди? Один хедер, один футер.

Section class="banner" - неверно. Это div - тут нет контента, просто слайдер. Секция - это прежде всего области какой-то статьи или сайта, в которых можно выделить (обычно) заголовок, футер, ну и сам контент. Секция это прежде всего семантический тег. Если содержимое не пойми какое - это div - просто обертка со стилем.

Section - content также неверно по этой же причине, это все div.

<article class="news"> - вот здесь склоняюсь как раз к section, но могу ошибаться.

В итоге вышла такая вот структура документа http://gsnedders.htm...esta/index.html

<br class="clear"> вот это очень плохо, это уже не семантическая верстка, а добавление элемента внешнего оформления. Тут overflow, либо псевдоклассы clearfix.

Также в одной из книг по хтмл5 советуют каждый article и section начинать с h1 заголовков, но тут я наткнулась на статью, в которой эта техника подвергается критике - поправьте - как же быть?

«Секции (*разделы) документа могут содержать заголовки любого порядка, но разработчикам строго рекомендуется либо использовать только h1 элементы, либо применять заголовки порядка, соответствующего уровню вложенности секции, в которой они находятся.»

!--[if lt IE 10]> разве тут должен быть не ie 9?

type="http://ajax.googleap...n.js"></script> лучше воткнуть перед /body

<b> кажется уже нецелесообразно использовать для семантики документа, может быть попробовать em или strong - могу ошибаться. прокомментируйте.

<br/> - закрытие тега в хтмл5 излишне. Хорошо бы всем картинкам добавить атрибуты height и width;

Если в чем-то заблуждаюсь, более опытные верстальщики поправьте пожалуйста).

[Delat]

!--[if lt IE 10]> разве тут должен быть не ie 9?

Так и есть. Только в своей верстке я писал также, иначе в IE 9 новые теги не распознавались им.

ТС: заметил что стиль шрифта в вашей верстке кое-где отличается от макетного. Мне кажется вы сделали хорошо, жаль что не пояснили причину. Если и есть косяки, то они поправимы и за короткое время с опытом исчезнут.

[Zverushka]

Странно, вроде IE9 поддерживает новые теги?

[SelenIT]

в одной из книг по хтмл5 советуют каждый article и section начинать с h1 заголовков, но тут я наткнулась на статью, в которой эта техника подвергается критике - поправьте - как же быть?

В HTML5 алгоритм построения "document outline" (схемы/плана/сводки/«краткого содержания» страницы для семантических анализаторов) строится на том, что при использовании секционных элементов ранг заголовка не важен совсем, важна лишь вложенность (т.е. <article><h1> и <article><h5> — одно и то же). Поэтому некоторые «фанаты» новизны агитировали за единообразие — использовать один и тот же заголовочный тег для всех уровней (хоть первый попавшийся, за неимением нейтрального <h>, предлагавшегося когда-то в XHTML2). В этом был смысл, т.к. с одинаковым тегом для заголовков секции можно ворочать как угодно, вставляя друг в друга как матрешки, переносить из одной секции в другую и т.д.

Но старые анализаторы (что хуже всего — таковые в поисковиках) эту новую «методу» пока так и не внедрили, более того, сам этот алгоритм оказался в спецификации в перечне "features at risk" (т.е. есть ненулевой шанс, что его вообще отменят/заменят/полностью перепишут). Поэтому здравый смысл подсказывает, что лучше пока полагаться на старый добрый анализатор в манере HTML4, т.е. на правильную вложенность заголовков. Для HTML5 принципиальной разницы нет, а поисковикам и т.п. авось понравится больше...

[Zhuchok]

Я не профи, но выскажу несколько мыслей...

Спасибо большое, направили на нужные мысли. Я о HTML5 прочел немного в книги Б.Лоусона, и его объяснение по поводу section не легли как нужно в голову. Кстати насчет хедеров они пишут, что нормальное явление если он не один на странице. Хотя в моем случае, может и излишки.

!--[if lt IE 10]> разве тут должен быть не ie 9?

Так и есть. Только в своей верстке я писал также, иначе в IE 9 новые теги не распознавались им.

ТС: заметил что стиль шрифта в вашей верстке кое-где отличается от макетного. Мне кажется вы сделали хорошо, жаль что не пояснили причину. Если и есть косяки, то они поправимы и за короткое время с опытом исчезнут.

Спасибо.

Edited July 18, 2013 by Zhuchok

[Zverushka]

Кстати насчет хедеров они пишут, что нормальное явление если он не один на странице.

Да я тоже как раз эту книгу читала. Я это поняла в том плане, что хедер может быть у статьи, у секции, у страницы - несколько на странице. Но вот теперь не могу найти информации, что не может быть 2 хедера внутри каждого блока. Наверное я ошибаюсь. Ну как бы просто голова, ноги - они одни =)...

[Catherine]

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

header, section, footer {
min-width: 1440px;
}

Если это не входило в условие задачи (а я почти уверена, что это именно так), то ширина подобрана неверно, исходя из этой таблицы: http://gs.statcounte...y-201206-201306

Идем дальше:

<ul>О компании
<li><a href="#">Почему Siesta</a></li>
<li><a href="#">Ключевые ценности</a></li>
<li><a href="#">Социальная деятельность</a></li>
<li><a href="#">Наша команда</a></li>
<li><a href="#">Акции и новости компании</a></li>
</ul>

Я бы в список вкладывала только элементы списка. Считаю данную конструкцию грубым нарушением. Достаточно того, что именно благодаря этому документ не прошел валидацию на http://validator.w3.org А это все-таки тестовая работа

<!--[if lt IE 10]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Разве html5shiv нужен не для IE8 и ниже?

Далее:

<header class="region"></header>
<header class="header-main"></header>

Два хеадера один за другим - это что за Змей Горыныч? Дискуссия по нескольким хеадерам в данном случае абсолютно неуместна. Даже просто исходя из логики - зачем два хеадера подряд одному разделу? Если читали Б.Лоусона и Р.Шарпа, то во 2 главе обсуждаются особенности использования:

каждая статья может иметь свои собственные элементы <header> И <footer>. Это значит, что помимо всей страницы собственные заголовки и футеры могут быть также и у статей

Если уж IE7+, то фиксированный блок "Участвуйте в акции" можно было хотя бы попробовать сделать и не картинкой, если очень хотелось получить работу.

И по поводу section, article, aside и прочих. Не знаете однозначно, использовать или нет, то лучше не использовать

[Delat]

А ещё может быть вы долго верстали?

[Zhuchok]

.

Edited July 21, 2013 by Zhuchok

[Zhuchok]

Посмотрев на горизонтальный скролл

Заставили меня всерьез задуматься о размерах, спасибо Вам большое, учту все ваши замечания!

А ещё может быть вы долго верстали?

Сейчас понимаю, что можно было и побыстрей!

[Zverushka]

А сколько у тебя заняла времени верстка? И ты работал до этого верстальщиком?

[Zhuchok]

А сколько у тебя заняла времени верстка? И ты работал до этого верстальщиком?

Дня за 2 сверстал, с учетом, что первый раз под ie7+. Верстальщиком не работал. Это хобби. До этого, кое как сверстал 5 бесплатных шаблонов (не кроссбраузерно). А ты работаешь верстальщиком?

[Zverushka]

Нет, я тоже только начинаю и доучиваюсь сейчас, чтобы начать искать работу.

[exeto]

кажется уже нецелесообразно использовать для семантики документа, может быть попробовать em или strong - могу ошибаться. прокомментируйте.

Верстка со смыслом. Перемотайте на 19:20