Вёрстка piatto

[antonKar]

http://piatto.karmanov.ws/

Раскритикуйте меня, прошу вас!

[npofopr]

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

Меню в футере тоже можно было бы списком сделать.

[antonKar]

Ну да, с классами в списках я, наверное, переборщил чуток. Надо будет у li внутри article убрать классы.

А меню же у нас теперь списками не верстается.

Edited October 18, 2013 by antonKar

[npofopr]

А меню же у нас теперь списками не верстается.

а как теперь верстается? просто дивами?)

[antonKar]

nav + a

дивы для какого-нибудь оформления.

[Bassline]

Скажите, а каким образом реализована поддержка атрибута placeholder в древних версиях IE?

[klierik]

Скажите, а каким образом реализована поддержка атрибута placeholder в древних версиях IE?

скорее всего этот код отвечает за поддержку:

<!--[if lte IE 9]>
        <script src="/js/jquery.placeholder.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('input[placeholder], textarea[placeholder]').placeholder();
            });
        </script>
    <![endif]-->

я бы забил. но решать заказчику.

[Bassline]

Скажите, а каким образом реализована поддержка атрибута placeholder в древних версиях IE?

скорее всего этот код отвечает за поддержку:

<!--[if lte IE 9]>
<script src="/js/jquery.placeholder.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input[placeholder], textarea[placeholder]').placeholder();
});
</script>
<![endif]-->

я бы забил. но решать заказчику.

В смысле оно того не стоит?

[klierik]

В смысле оно того не стоит?

да, не стоит. если браузер чего-то не умеет то он этого попросту не умеет. и незачем создавать интерфейс что бы "научить" его это делать.

поддержка старых браузеров заказчику обходится в разы дороже.

[advokatua]

1)

<div class="header__logo"><img src="/images/header/logo.png" alt=""></div>

2) class="moreInformationAboutProduct"

3) Так вообще нормально делать? (Для себя спрашиваю)

 <header class="header>...

Edited October 18, 2013 by advokatua

[Bassline]

3) Так вообще нормально делать? (Для себя спрашиваю)

 <header class="header>...

А если на странице несколько тегов <header>, как определить где шапка сайта и где... не шапка? Я вообще не пойму смысл использования этого тега в контенте, напридумывали всякого. (Это я тоже для себя спрашиваю)

Edited October 18, 2013 by Bassline

[antonKar]

1)

<div class="header__logo"><img src="/images/header/logo.png" alt=""></div>

2) class="moreInformationAboutProduct"

3) Так вообще нормально делать? (Для себя спрашиваю)

 <header class="header>...

Иииии????

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

Пытаясь телепатически угадать вопрос по второму пункту - у меня бывают иногда проблемы с придумыванием имён блоков, но что тут конкретно не так я без понятия, мои телепатические способности закончились.

Я вообще не пойму смысл использования этого тега в контенте, напридумывали всякого. (Это я тоже для себя спрашиваю)

Такая же фигня, сколько не пытался, никак себе такого в воображении не смог представить.

Edited October 19, 2013 by antonKar

[advokatua]

Очевидно все ради семантики.

Пару дней назад читал/смотрел и наши статьи и пиндостанские. Что у нас споры про article, section, figure|figcaption, что у них. Но у них в комментах прослеживается желание все это понять, хотя бы по своему, и начать использовать, а наши же просто плюются в стороны намекая, что все это бред на сегодняшний день и никому эта дИбильная семантика не сдалась. Ведь по сути все эти элементы начнут работать и на что-то влиять попозже (у астрологов надо спросить когда именно). Какой сейчас толк трахать себе мозг и спорить о том где применить figure|figcaption (которые применяются не только к картинкам, а и к любому связанному содержимому), когда ни на поиск, ни на выдачу это не влияет. Зато вся эта %;№: семантика в ИЕ8 уже не работает. А как известно, сегодня еще предостаточно динозавров, которые хотят кроссбраузерную верстку вплоть до ИЕ6. Выходит надо лепить хаки и кучу всяких <!-- lte gte IE --> со своими стилями.

Насчет шапки. Этих шапок на странице может быть сколь угодно, потому называя главную шапку таким же именем странно как потом при поддержке сайта не запутаться? ) Не увидел точку спереди и все, сиди дебаж 3 часа. Да и не в точке дело.

Почему не назвать просто и понятно: top-header, main-header, main-head, top-head? )

Иииии????

Пытаясь телепатически угадать вопрос по второму пункту - у меня бывают иногда проблемы с придумыванием имён блоков, но что тут конкретно не так я без понятия, мои телепатические способности закончились.

Это я у одного из админов подсмотрел подобную методику оценивания. Кажется, что лучше ткнуть в место где (якобы) косяк, и человек сам подумал, нежели ткнуть и все за него додумать и сказать

Ну если совсем прямо то:

1) Лого не ссылкой + не прописан alt - Мелочь, а неприятно

2) Такой длинный, самописный, да еще и кемел кейс я вижу впервые

upd.

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

<nav class="footer__menu">
        <h2 class="footer__menuTitle">Download Piatto</h2>
        <div class="footer__menuItem"><a href="#" title="">He returned to Chile</a></div>
        <div class="footer__menuItem"><a href="#" title="">as a professor</a></div>
        <div class="footer__menuItem"><a href="#" title="">at the Universidad de Chile in 1946</a></div>
        <div class="footer__menuItem"><a href="#" title="">Parra has been nominated several times for the Nobel Prize in Literature.</a></div>
         <div class="footer__menuItem"><a href="#" title="">Nicanor Parra</a></div>
</nav>

Edited October 19, 2013 by advokatua

[antonKar]

Пару дней назад читал/смотрел и наши статьи и пиндостанские. Что у нас споры про article, section, figure|figcaption, что у них. Но у них в комментах прослеживается желание все это понять, хотя бы по своему, и начать использовать, а наши же просто плюются в стороны намекая, что все это бред на сегодняшний день и никому эта дИбильная семантика не сдалась.

По-моему вы читаете неправильные форумы русскоязычные.

Ведь по сути все эти элементы начнут работать и на что-то влиять попозже (у астрологов надо спросить когда именно).

На поисковики же влияет уже как сто лет в обед. Или ещё нет?

Зато вся эта %;№: семантика в ИЕ8 уже не работает. А как известно, сегодня еще предостаточно динозавров, которые хотят кроссбраузерную верстку вплоть до ИЕ6.

https://encrypted.go...om/#q=html5shiv

Насчет шапки. Этих шапок на странице может быть сколь угодно, потому называя главную шапку таким же именем странно как потом при поддержке сайта не запутаться? ) Не увидел точку спереди и все, сиди дебаж 3 часа. Да и не в точке дело. Почему не назвать просто и понятно: top-header, main-header, main-head, top-head? )

Потому что шапка чаще всего на сайте - она всегда шапка одна и только одна. Я лично ещё ни разу не видел необходимости использования её в каком-то ином месте. И если человеку непонятно, что элемент с классом header - это шапка сайта, что это основная шапка, то это уже точно не мои проблемы. И да, в нормальных редакторах теги, классы и идентификаторы оформляются по-разному. Как можно спутать - ума не приложу.

1) Лого не ссылкой + не прописан alt - Мелочь, а неприятно

А зачем на главной странице ссылка на лого? Тут дело вкуса, на самом деле. С альтом согласен, есть косяк.

2) Такой длинный, самописный, да еще и кемел кейс я вижу впервые

Ну что поделать, всякое в жизни бывает)

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

Могу посоветовать вам открыть книгу по HTML5 и узнать, что nav используется для меню. Хотя, на самом деле, в макете фиг поймёшь что куда и как (ссылки оформлены как кнопки, я шатал), и если это не основное меню навигации по сайту, то это дело вполне можно заменить на section, в таком случае я не спорю.

Edited October 19, 2013 by antonKar

[advokatua]

По-моему вы читаете неправильные форумы русскоязычные.

Любой интересный материал выходящий на русских форумах это фактически 100% перевод. Это факт, а не нелюбовь к рунету или что-то вроде того. )

Могу посоветовать вам открыть книгу по HTML5 и узнать, что nav используется для меню.

Nav - по западным статьям/спорам/дискуссиям, должен быть на странице только один и относится он должен к самой главной навигации. (Споры, впринципе, будут продолжаться до тех пор пока элемент не перейдет в release candidate, а не editor's draft как сейчас).

Выдержка с developer.mozilla.org:

The HTML Navigation Element (<nav>) represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

Usage notes:

• Not all links of a document must be in a <nav> element, which is intended only for major block of navigation links; typically the<footer> element often has a list of links that don't need to be in a <nav> element.
  

еще один (статья за 2009)

The HTML 5 specification defines <nav> as:

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links.

The key phrase there is “major navigation” (previously primary navigation).

Но это еще пол беды.

1) Откуда у вас в nav взялся h2? Может это и не ошибка, но нигде доселе такого не видел

<nav class="footer__menu">

<h2 class="footer__menuTitle">Download Piatto</h2>

2) Зачем каждый пункт меню оборачивать в div? Чем список не устроил?

ЗЫ У лого на главной ссылка вешается для СЕО. В итоге ссылочный вес добавляется для лучшего ранжирования.

Edited October 19, 2013 by advokatua

[antonKar]

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

Вы немного неправильно интерпретировали выдержки, нигде не сказано, что nav должен быть только один для самой главной анимации.

Есть ведь ещё и подменю всякие, находящиеся отдельно в стороне от основной навигации по сайту, например меню каталога на сайте.

Но относительно обсуждаемого подвала да, возможно я прокосячился и надо подкорректировать.

Откуда у вас в nav взялся h2? Может это и не ошибка, но нигде доселе такого не видел

Думал какое-то время над этим момент, в итоге решил, что эта штука похожа всё-таки на заголовок, а не на ссылку.

И да, вы ни разу не видели, чтобы у меню был заголовок?

Зачем каждый пункт меню оборачивать в div? Чем список не устроил?

Уже объяснял этот момент несколькими постами выше.

ЗЫ У лого на главной ссылка вешается для СЕО. В итоге ссылочный вес добавляется для лучшего ранжирования.

В смысле если страница ссылается на саму себя, то от этого есть какой-то толк?

Edited October 20, 2013 by antonKar

[advokatua]

И да, вы ни разу не видели, чтобы у меню был заголовок?

Вчера на западенском видел. Там h1 со списком был обернут. Но статья была за 2009 год, и в комментах ооочень жаркие споры.

И вдобавок довольно прилично статей с устаревшиими данными. Заметил, спецификация по некоторым элементам html5 чуть ли не каждый месяц обновляется.

В смысле если страница ссылается на саму себя, то от этого есть какой-то толк?

Конкретно на данный момент не скажу. У СЕОшников методы продвижения раз через раз меняются.

Кстати, лого делается ссылкой, а отмена для главной происходит через СМS. Иначе программеру прийдется самому дописывать.

Насчет списка меню:

Так у вас же все равно ссылки обернуты в доп. див. По приведенной ссылке это проще выглядит.

Хотел бы я знать откуда он вот это вычитал:

<nav>
<section>
<a href="#">Главная</a>
<nav>
<a href="#">HTML и CSS приемы</a>
<a href="#">Обучение</a>
<a href="#">HTML справочник</a>
</nav>
</section>

<a href="#">HTML и CSS приемы</a>
<a href="#">Обучение</a>
<a href="#">HTML справочник</a>
</nav>

Наткнулся на очередной перевод, на хабре http://habrahabr.ru/post/124993/

Комменты один в один с тем, что я писал выше. Народ просто плюется и обсырает, и лишь единицы пытаются объяснить разъяренной толпе что-то толковое, но их попытки навести порядок тут же подавляются бунтующими настроениями

Понравился коммент с 5+

Дело в том, что огромное кол-во верстальщиков — безрукие идиоты, место которым за стойке в Макдональдсе, а не сайты верстать.

Edited October 20, 2013 by advokatua

[antonKar]

Кстати, лого делается ссылкой, а отмена для главной происходит через СМS. Иначе программеру прийдется самому дописывать.

Тогда привычка. У меня знакомый программер шаблон главной отдельно делает, шаблон внутряков отдельно.

Хотел бы я знать откуда он вот это вычитал:

Тоже этот момент спорный показался. По мне тут правильнее было бы делать связку nav+nav.

[Zverushka]

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

Хедеры для контента классная штука, часто какую-нибудь шапку элемента нарисуют - вот для нее прекрасно хедер подходит.

Жаль, что hgroup удалили - мне нравилось его использовать. Section в статье вообще неверно используется.

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

<main> - что это?

Обертку принято wrap или wrapper называть

<br /> - самозакрытие не нужно в хтмл 5 - не надо примешивать Ххтмл стили - они остались в прошлом.

<section class="ourProduct"> На мой взгляд тут нужен просто div. Section - это когда можно выделить заголовок и контент. По другим секциям в документе тоже самое. Нужно на эту тему прочитать хорошую статью.

<p> </p> - отступы делаем через css, а не ентерами.

"/images/aboutOurProduct/wrench.png" - не надо ссылок от корня. В папку сайт закинешь и все - не загрузится ничего.

<a href="#" title="" class="downloadNow__linkCloudlet"></a> - зачем титл?

moreInformationAboutProduct__contactForm - я бы все формы начинала со слова form

Системы именования на Бэм похожа, но если это не БЭМ, я бы лично не стала для h2 и a назначать свои классы - итак понятно, что блок nameblock - сам по себе уникален, поэтому достаточно задать для h2 - nameblock h2 {}

Edited October 20, 2013 by Zverushka

[SelenIT]

пока элемент не перейдет в release candidate, а не editor's draft как сейчас

Вообще-то он уже пару месяцев как Candidate Recommendation. Не путайте Editors draft (редакторскую версию спеки с последними правками, существующую всё время, пока над спекой ведется хоть какая-то работа, хранящуюся в девелоперской ветке работчей группы) и Working Draft (статус спецификации, еще не готовой, но уже опубликованной в разделе w3.org/TR).

На поисковики же влияет уже как сто лет в обед. Или ещё нет?

Не встречал подтверждений. Большинство более-менее разбирающихся людей, у кого я спрашивал, говорят, что практически не влияет.

<main> - что это?

Сюрприз от W3C:) Это не обертка.

[advokatua]

Вообще-то он уже пару месяцев как Candidate Recommendation.

Когда заходишь, внизу такая штука висит:

This is a work in progress!

For the latest updates from the HTML WG, possibly including important bug fixes, please look at the

editor's draft

instead.

Edited October 21, 2013 by advokatua

[SelenIT]

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

Кстати, у меня она висит всего секунду, потом скрывается.

[antonKar]

Section в статье вообще неверно используется.

У меня или в статье про меню?

- самозакрытие не нужно в хтмл 5 - не надо примешивать Ххтмл стили - они остались в прошлом.

Скажите это программисту, который будет привязывать вёрстку к CMS, использующей XSLT-шаблонизацию (например UMI.CMS)

Section - это когда можно выделить заголовок и контент.

Это когда блок имеет какую-то семантику, но под него ничего не подходит из тегов HTML5.

- отступы делаем через css, а не ентерами.

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

"/images/aboutOurProduct/wrench.png" - не надо ссылок от корня. В папку сайт закинешь и все - не загрузится ничего.

Привычка верстать под программиста.

- зачем титл?

В мою молодость ссылки без title не проходили валидацию. Или в HTML5 можно не указывать тайтлы у ссылок?

Edited October 23, 2013 by antonKar

[Zverushka]

http://gsnedders.htm...to.karmanov.ws/

Вот схема документа благодаря секциям. Какая-то непрозрачная, не находите?

A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

Главное правило использования секции, это когда контекст должен быть выделен в отдельную "главу" чтоли (примерная мысль).

Одно из правил - если не знаешь. каким тегом обернуть (семантическим) - оборачивай div.

Привычка верстать под программиста.

И чем слеш поможет программисту?

А если у нас размер шрифта изменится будем изменять размеры отступов?

C чего бы размер шрифта изменился? Хотим резины и адаптируемости? Ну делайте отступы в em.

Edited October 23, 2013 by Zverushka

[SelenIT]

В мою молодость ссылки без title не проходили валидацию.

Чем таким суровым валидировали, если не секрет? Насколько я в курсе, атрибут title ни в одной спеке ни для одного элемента не был обязательным. С alt для <img> не перепутали случаем?

Это когда блок имеет какую-то семантику, но под него ничего не подходит из тегов HTML5.

Можно увидеть источник такого интересного определения?

И чем слеш поможет программисту?

Если там XSLT-шаблоны (как говорит автор), то они в общем случае должны быть веллформным XML, это да. Тут совместимость выручает. Сила HTML5 — не в том, что слеши можно не ставить, а в том, что ими можно не париться