Требуется Оценка Вёрстки на HTML5...

[Yamaradg]

Здравствуйте. Решил переверстать для себя титульную блога с HTML_4.01 на HTML5(впервые)и по ходу дела возникли некоторые вопросы:

1) Существует ли на сегодняшний день идеальная,с точки зрения отображения, реализация {text-shadow} для IE-7,8,9 ?

2) Стоит ли пользоваться Placeholderом(в инпутах)? Если учесть тот факт, что некоторые браузеры этого не понимают...

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

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

http://webmaster.ayrveda.ru/Ozdorovlenie-Organizma/index.html

(Есть подозрения, относительно правильности использования тегов <aside>,<menu>,<figure>)

P.S. Буду очень благодарен за любые советы и рекомендации по данной странице...

Edited August 26, 2012 by Yamaradg

[wildhind]

1) нет.

2) да.

3) на эту тему столько статей уже написано. Почитайте чего-нибудь.

[Yamaradg]

3) на эту тему столько статей уже написано. Почитайте чего-нибудь.

Читал многие источники(есть спорные моменты и трактовки) - но хотелось бы послушать мнения верстальщиков с хорошим опытом...

[wildhind]

а, ну есть любители порассуждать на эту тему.

[Vin]

2) Стоит ли пользоваться Placeholderом(в инпутах)? Если учесть тот факт, что некоторые браузеры этого не понимают...

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

Рекомендую использовать Placeholder.js. Прикол в том, что скрипт сам определяет, когда есть нативная поддержка placeholder, а когда — нет и ему нужно восполнить этот недостаток. Сторонние библиотеки не требуются.

[Viper]

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

http://webmaster.ayr...enie_Organizma/

(Есть подозрения, относительно правильности использования тегов <aside>,<menu>,<figure>)

По поводу <menu>: _http://forum.htmlbook.ru/index.php?showtopic=36592

<figure>: _http://web-standards.ru/articles/figure-figcaption/

в твоем макете: заменил бы DIV.slider_united на figure, описание для слайдов поместил бы в <figcaption>, а не в <aside>. ИМХО

<aside>: _http://html5doctor.com/aside-revisited/

Ты совершенно противоположным образом использовал его..., ИМХО)

[Yamaradg]

<figure>: _http://web-standards.ru/articles/figure-figcaption/

в твоем макете: заменил бы DIV.slider_united на figure, описание для слайдов поместил бы в <figcaption>, а не в <aside>. ИМХО

<aside>: _http://html5doctor.com/aside-revisited/

Ты совершенно противоположным образом использовал его..., ИМХО)

К стати я попробывал сделать, т.к. вы сказали - но валидатор ругаеться...

Поскольку тег <figcaption> должен быть или в начале или в конце <figure>.

(но в данном случае это неосуществимо, поскольку мне поместить этот тег необходимо внутри <li><a href=""></a></li>)

P.S. Так как же всё таки необходимо поступить в данном случае?

Пусть в <aside> будет как и раньше или же в <span> завернуть например?

[Viper]

Пусть в <aside> будет как и раньше или же в <span> завернуть например?

лучше в <p>, в таком случае

К стати я попробывал сделать, т.к. вы сказали - но валидатор ругаеться...

Поскольку тег <figcaption> должен быть или в начале или в конце <figure>.

P.S. Так как же всё таки необходимо поступить в данном случае?

Да, был не прав, поспешил... Так будет правильно(в каждом слайде):

<a href="#" title="">
   <figure>
      <img ... />
      <figcaption> ... </figcaption>
   </figure>
</a>

, но в том случае, если описание в <figcaption> будет напрямую относиться к изображению. В противном случае, <figure> там нету нужды ставить...

Edited August 14, 2012 by Viper

[cyklop77]

Yamaradg,

у вас есть блоки section без заголовков(.center_content, right_content). не уверен, что это правильно. я бы использовал дивы. вот http://css-live.ru/articles/blok-sxema-sekcionirovaniya-elementov-html5.html

не понимаю зачем в article используете сразу заголовок второго уровня. ошибки нет, аутлайнер показывает осмысленное оглавление всё равно. но я бы h1 использовал

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

про aside в article уже сказали выше. это даже нелогично так как по вашей логике основным содеранием статьи явяется несколько ссылок)

высота подвала задана жёстко(хотя при помощи overflow вы подстраховались). я бы не стал так делать, пусть контент-менеджер забивает информацию любую

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

высота верхнего меню фиксирована. попробуйте добавить несколько пунктов и увидите, что они выходят за пределы зелёной области. здесь даже overflow нет...

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

Edited August 14, 2012 by cyklop77

[Yamaradg]

Yamaradg,

1) у вас есть блоки section без заголовков(.center_content, right_content). не уверен, что это правильно. я бы использовал дивы. вот http://css-live.ru/articles/blok-sxema-sekcionirovaniya-elementov-html5.html

2) не понимаю зачем в article используете сразу заголовок второго уровня. ошибки нет, аутлайнер показывает осмысленное оглавление всё равно. но я бы h1 использовал

3) у меня изображения очень долго грузились. уверены, что оптимизировали их?

4) про aside в article уже сказали выше. это даже нелогично так как по вашей логике основным содеранием статьи явяется несколько ссылок)

5) высота подвала задана жёстко(хотя при помощи overflow вы подстраховались). я бы не стал так делать, пусть контент-менеджер забивает информацию любую

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

7) высота верхнего меню фиксирована. попробуйте добавить несколько пунктов и увидите, что они выходят за пределы зелёной области. здесь даже overflow нет...

8) с заголовками в шапке тоже беда. добавьте количество симовлов и увидите что произойдёт(в частности блок поиска вообще уедет из пределов видимости).

9) дальше не смотрел, но думаю, ляпов такого типа много ещё. (вы слишком доверяете контент-менеджерам и секретарям -))

1) Возможно. Буду разбираться...

2) Не совсем понял ваш вопрос? Насколько я знаю больше 1 тега <H1> на одной странице быть не должно?

3) Не оптимизировал, поскольку у меня всё очень быстро грузиться...(+ это мой личный блог и я не видел необходимости в данной процедуре...)

4) Руководствовался книгой Б. Хогана. Ссылка на источник здесь: Мой Dropbox

Страница 37.(раздел: 'Дополнения и боковые панели.')

Не исключаю, что именно я ошибаюсь в данном случае, поскольку не правильно с трактовал ситуацию.

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

5) В данном случае именно я и являюсь контент менеджером и делать высоту по другому нет смысла.

(а вообще конечно правильное замечание...)

6) ИМХО, что это на любителя + зависит от того смотрится ли это с точки зрения эстетики.

7) Cогласен, что это в принципе ошибка.(Но я и не планирую ничего там больше видоизменять...)

8) Согласен. Но опять же повторюсь что это меня устраивает. В другой ситуации я бы скорее всего делал какой то из элементов 'абсолютом'.

9) Если найдёте ещё ошибки - буду благодарен. (самому интересно)

P.S. Огромное спасибо за конструктивную критику. Именно в таком ключе я и хотел услышать информацию данном посте...

Edited August 14, 2012 by Yamaradg

[cyklop77]

по поводу 2) в html5 допускается наличие нескольких h1. и если подумать, то это более удобно. проще вносить изменения в структуру документа

мне при "переходе" на html5 такой способ разметки заголовков казался очень неудобным. сейчас наоборот)

по поводу 3) что значит личный? в него заходят читатели, а канал не у всех хороший

Edited August 14, 2012 by cyklop77

[Viper]

по поводу 2) в html5 допускается наличие нескольких h1. и если подумать, то это более удобно. проще вносить изменения в структуру документа

мне при "переходе" на html5 такой способ разметки заголовков казался очень неудобным. сейчас наоборот)

Но правило одного <h1> остается в пределах структурных тегов.

Edited August 14, 2012 by Viper

[Yamaradg]

по поводу 3) что значит личный? в него заходят читатели, а канал не у всех хороший

3) Если возможно, попробуйте зайти ещё раз.(днём у меня с сервером проблемы были. Если будет опять грузиться долго - значит буду оптимизировать.

Хотя если честно - то уже и не помню точно, возможно они уже и с оптимизированы. Дело давно было...)

P.S. А насчёт 4-го пункта можете высказать ваше мнение?

Edited August 14, 2012 by Yamaradg

[cyklop77]

P.S. А насчёт 4-го пункта можете высказать ваше мнение?

прочитал эту часть книги. в ней автор тоже признаёт, что в aside располагается неосновной контент(отсутствие которого не помешает понять основное содержание). но у него там дальше в тегах <p> довольно много этого самого основного содержания. в вашем же случае как я уже говорил основным содержанием являются четыре ссылки. это нелогично

если ситуация спорная, то я стараюсь в первую очередь руководствоваться логикой.

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

а изображения ваши кажется и правда оптимизированы неплохо. по крайней мере мой ff-плагин page speed показывает

http://prozaik.16mb.com/misc/Untitled-1.png

Edited August 14, 2012 by cyklop77

[Yamaradg]

прочитал эту часть книги. в ней автор тоже признаёт, что в aside располагается неосновной контент(отсутствие которого не помешает понять основное содержание). но у него там дальше в тегах <p> довольно много этого самого основного содержания. в вашем же случае как я уже говорил основным содержанием являются четыре ссылки. это нелогично

если ситуация спорная, то я стараюсь в первую очередь руководствоваться логикой.

Большое Спасибо за помощь.

P.S. Правда я так до конца и не понял на счёт <aside>?

То есть 4-рёх ссылок в теге aside у меня ведь не имеется?

Там есть только <p> и <img>.

Тег <p> также присутствует и у автора книги.

В моём же случае <p> также не является основным контентом, поскольку основное содержание должно находиться на другой странице(кнопка 'Далее')

Я руководствовался именно такими соображениями..(не знаю насколько они верны? Что скажите? Так можно трактовать?

То есть я имею ввиду, что в данном случае основного контента попросту нет, поскольку он находиться на другой странице с полным постом?)

Edited August 14, 2012 by Yamaradg

[Yamaradg]

Yamaradg,

у вас есть блоки section без заголовков(.center_content, right_content). не уверен, что это правильно. я бы использовал дивы. вот http://css-live.ru/articles/blok-sxema-sekcionirovaniya-elementov-html5.html

В книге Б.Хогана на стр.30(можно увидеть по ссылке на Мой Dropbox) иметься базовая схема,

на которую я и ориентировался..

P.S. Буду благодарен, если кто-нибудь ещё выскажет своё мнение относительно обязательности заголовков в тегах <section>, а также поделиться мнением насчёт моего предыдущего комментария...

Edited August 26, 2012 by Yamaradg

[cyklop77]

для вас книга хогана как святое писание, смотрю))

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

кстати я сам до сих пор толком не разобрался с заголовками в section, самого этот вопрос беспокоит

Edited August 27, 2012 by cyklop77

[Viper]

и пишут на её основе статьи. в комментах к этой

Что касается этой статьи - то это перевод.

кстати я сам до сих пор толком не разобрался с заголовками в section, самого этот вопрос беспокоит

Спецификацию HTML5 сделали очень гибкой и не навязчивой, несмотря на сложности с пониманием... Они не задают четких правил-аксиом, по отношению к структуре страницы. Это дает волю разработчикам самим решать - где и какой структурный элемент должен находиться, но семантику(смысл) этих элементов они менять не могут. Они - "строители", а структурные теги - всего лишь инструмент. В итоге, все зависит от самых разработчиков - как они используют эту самую "свободу": "построят ли они туалет в комнате, где по логике должна быть спальня?", ИМХО.

Буду благодарен, если кто-нибудь ещё выскажет своё мнение относительно обязательности заголовков в тегах <section>

Нет, заголовки не обязательны - они всего лишь еще один(и, ИМХО, значительный) фактор к, своего рода, определению - поставить тег <section> или <div>, ИМХО. Но, например, я в своей практике крайне редко применял <section> без заголовка...

Edited August 27, 2012 by Viper

[Viper]

P.S. Правда я так до конца и не понял на счёт <aside>?

То есть 4-рёх ссылок в теге aside у меня ведь не имеется?

Там есть только <p> и <img>.

Тег <p> также присутствует и у автора книги.

В моём же случае <p> также не является основным контентом, поскольку основное содержание должно находиться на другой странице(кнопка 'Далее')

Я руководствовался именно такими соображениями..(не знаю насколько они верны? Что скажите? Так можно трактовать?

То есть я имею ввиду, что в данном случае основного контента попросту нет, поскольку он находиться на другой странице с полным постом?)

Не в ту сторону у вас "повернуто" мышление)

Понятие "основного контента" привязывается к каждой странице сайта, а не к всему сайту в целом. И не нужно отталкиваться от тегов, которые находятся в данном блоке/секции.

В вашем случае, например, краткое содержание статьи - это и есть основной контент на данной странице, а вся правая колонка - aside-элементы, ИМХО.

Edited August 27, 2012 by Viper

[Yamaradg]

Не в ту сторону у вас "повернуто" мышление)

Понятие "основного контента" привязывается к каждой странице сайта, а не к всему сайту в целом. И не нужно отталкиваться от тегов, которые находятся в данном блоке/секции.

В вашем случае, например, краткое содержание статьи - это и есть основной контент на данной странице, а вся правая колонка - aside-элементы, ИМХО.

Понял вас. Спасибо.

P.S. Не могли бы вы показать(если можно) в общих чертах пример того, как бы именно вы оформили html код данных блоков?

(начиная с <article class="united_info">)

Edited August 27, 2012 by Yamaradg

[Viper]

Не могли бы вы показать(если можно) в общих чертах пример того, как бы именно вы оформили html код данных блоков?

(начиная с <article class="united_info">)

1. в <article class="united_info"> убрал бы <aside>

2. div.sidebox заменил бы на aside.sidebox

3. теги <section> на данной странице, я бы не использовал

4. в nav.top_nav убрал бы <menu>

5. в тегах <form> убрал бы <fieldset>

6. ну и слайдер переделал бы так, как раньше(выше) описывал

П.С. Но опять же, это ИМХО. Нету единственно правильного варианта.

[Yamaradg]

4. в nav.top_nav убрал бы <menu>

Здесь не совсем вас понял.

То есть какой смысл убирать <menu>?

Придётся же тогда всё равно лишний блок <ul> прописывать?

Или вы <ul> считаете семантичнее?

P.S.

1. в <article class="united_info"> убрал бы <aside>

Ещё пришла мысль одна:

Если вместо <article class="united_info"><aside> прописать <article class="united_info"><figure>, а вместо <figure><p> прописать <figure><figcaption>?

(такой вариант имеет право на жизнь?)

Edited August 27, 2012 by Yamaradg

[Viper]

Здесь не совсем вас понял.

То есть какой смысл убирать <menu>?

Придётся же тогда всё равно лишний блок <ul> прописывать?

Или вы <ul> считаете семантичнее?

Да, нужно <ul> - семантичнее. <menu> - для веб-приложений.

Ещё пришла мысль одна:

Если вместо <article class="united_info"><aside> прописать <article class="united_info"><figure>, а вместо <figure><p> прописать <figure><figcaption>?

(такой вариант имеет право на жизнь?)

Может и имеет... но я не вижу в этом смысла, так как текст внутри <figcaption> не будет непосредственно касаться соответствующего изображения. Не нужно везде, где вы видите графику на сайте, питаться "вписать" ее в <figure>: этот тег служит для группировки графики и связи ее с поясняющим текстом. В данном случае, даже если бы текст и относился непосредственно к изображению, в <figure> не было бы пользы, так как все ее содержимое - статья(на данной странице), и это может вызвать "семантический конфликт", как при использовании, например, WAI-ARIA атрибутов в структурных тегах.

П.С. семейство шрифтов лучше(в идеале) задавать в таком виде(в данном случае, для Arial):

... Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; 

Edited August 28, 2012 by Viper