Оцените верстку , пожалуйста

stan077 · 10.12.2012

Доброе время суток,
сверстал страницу в html5, если кому-нибудь не жалко потратить немного времени, посмотрите, пожалуйста, что получилось,и напишете свои замечания по коду (обоснованная критика приветствуется

)
Что получилось можно посмотреть http://weburoki.com....rtfolio/BISCOM/

Женька · 15.12.2012

Чисто визуально - всё ровненько и красивенько. Дизайн простой, но симпатичный, и тоже... ровный. На первый пользовательский взгляд (!) никаких косяков нет. :blush:

tigra60 · 16.12.2012

Весьма недурно.

Несколько советов:

1. Правило №1. Для стилизации используем классы. А идентификаторы - для скриптов.
2. Старайтесь избегать излишнего вложения элементов:

Код:

<div id="status_bar">
  <nav>
    <ul id="top_menu">
      ...
    </ul>
  </nav>
</div>


<div id="logo"><span><a href="#">#</a></span></div>

В этих конструкциях лишние обертки
3. Активнее используйте новые HTML5 элементы для секционирования, но только не в оформительских целях!
4. Хотя спецификация и определяет отдельную иерархию заголовков для документа в целом и для каждого article или section, я бы пока не стал так делать. Старайтесь соблюдать иерархию заголовков по всему документу.

Отдельно хотелось бы поговорить по этому фрагменту:

Код:

<div id="logo"><span><a href="#">#</a></span></div>
<p class="slogan">Интернет в каждом доме, подключайся!</p>

Я бы его сделал так:

Код:

<hgroup class="logo">
<h1><a href="#">БИС-КОМ</a></h1>
<h2>Интернет в каждом доме, подключайся!</h2>
</hgroup>

При этом стилями заменяем текст в h1 на логотип

А то у вас получается, что заголовок h1 содержит текст "Добро пожаловать". Как, думаете, отнесутся к этому поисковики?

stan077 · 16.12.2012

Спасибо!

tigra60 сказал(а):
3. Активнее используйте новые HTML5 элементы для секционирования, но только не в оформительских целях!

А можно подробнее, какие еще HTML5 элементы можно добавить в эту разметку?

rhamdeew · 29.12.2012

Довольно неплохо, но:
тег <head> вы не закрыли
раз уж пишете на HTML5 то можно выкинуть аттрибут type из тегов link и script =)

Как вам уже советовали в предыдущих постах - используйте классы для верстки, а id для скриптов

Из HTML5 элементов самые основные вы уже применили (header,article,section,footer). Самый прикол в том что можно даже придумать свои элементы =) Правда в IE придется для них делать специфичные хаки.

motek · 29.12.2012

rhamdeew сказал(а):
Довольно неплохо, но:
тег <head> вы не закрыли
раз уж пишете на HTML5 то можно выкинуть аттрибут type из тегов link и script =)

Как вам уже советовали в предыдущих постах - используйте классы для верстки, а id для скриптов

Из HTML5 элементов самые основные вы уже применили (header,article,section,footer). Самый прикол в том что можно даже придумать свои элементы =) Правда в IE придется для них делать специфичные хаки.

раз уж пишете на HTML5...
...тег <head> можно и не закрывать
...лучше оставить атрибут type
...можно пример документа со своими элементами?

A-F · 29.12.2012

class для верстки, id для скриптов
а почему class не для скриптов ?)

rhamdeew · 29.12.2012

motek сказал(а):
rhamdeew сказал(а):

Довольно неплохо, но:
тег <head> вы не закрыли
раз уж пишете на HTML5 то можно выкинуть аттрибут type из тегов link и script =)

Как вам уже советовали в предыдущих постах - используйте классы для верстки, а id для скриптов

Из HTML5 элементов самые основные вы уже применили (header,article,section,footer). Самый прикол в том что можно даже придумать свои элементы =) Правда в IE придется для них делать специфичные хаки.

Нажмите, чтобы раскрыть...

раз уж пишете на HTML5...
...тег <head> можно и не закрывать
...лучше оставить атрибут type
...можно пример документа со своими элементами?

Если речь идет именно об html5, то атрибут type не обязателен.
Вообще html5 дает большую свободу веб-разработчику и названия элементов можно писать в любом регистре, можно не закрывать открытые теги, etc... но все же для соблюдения порядка в документе лучше теги закрывать.
Касательно своих элементов - основная часть браузеров кроме всеми любимого IE поддерживает создание собственных элементов. По умолчанию к данным элементам не применяются никакие стили.
Собственно для этого и находятся в коде указанного сайта строчки:

Код:

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

которые подключают скрипт html5shiv добавляющий поддержку данной фичи в IE. С тем же успехом вместо этого скрипта можно использовать Modernizr

motek · 29.12.2012

rhamdeew сказал(а):
Касательно своих элементов - основная часть браузеров кроме всеми любимого IE поддерживает создание собственных элементов. По умолчанию к данным элементам не применяются никакие стили.

приведите пример вот этого Вашего изречения, пусть даже без поддержки ишака

BaNru · 29.12.2012

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

Это действительно так. Я когда то делал.
Ишаку надо через JS вменять новый элемент

ArhAngel · 29.12.2012

BaNru сказал(а):
Это действительно так. Я когда то делал. Ишаку надо через JS вменять новый элемент

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

motek · 29.12.2012

ArhAngel сказал(а):
BaNru сказал(а):

Это действительно так. Я когда то делал. Ишаку надо через JS вменять новый элемент

Нажмите, чтобы раскрыть...

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

семь раз услышать, это не один раз увидеть

...пример в песочницу можно?

BaNru · 29.12.2012

http://jsfiddle.net/XKaCv/

tigra60 · 29.12.2012

A-F сказал(а):
class для верстки, id для скриптов
а почему class не для скриптов ?)

Потому, что по ID элемент находится быстро и просто:

Код:

getElementById()

А для классов аналогичной функции нет. Поэтому JS движок опрашивает ВСЕ элементы DOM на предмет присутствия нужного класса.
Затраты времени просто несопоставимы.

Немного скрасить ситуацию можно, указав, кроме класса, тег элемента. Тогда нужный класс ищется только у элементов указанного тега.

И не обольщайтесь, что вас спасет jQuery или querySelector(). И то, и другое работает по приведенному выше алгоритму.

ArhAngel · 30.12.2012

[member=tigra60], а если, к примеру, группе однотипных элементов, нужно применить какое-то действие, то тогда как? тоже через id?
Нет такого, что стили туда, а ид только там, просто нужно выбирать оптимальный вариант для каждого случая.

CamaroSS · 30.12.2012

Нужно представить себя браузером и выбрать правильное решение)))

A-F · 31.12.2012

Совеременные браузеры уже поддерживают getElementsByClassName и вполне уже давно.

Оцените верстку , пожалуйста

stan077

Well-Known Member

Женька

Well-Known Member

tigra60

Спасатель

stan077

Well-Known Member

rhamdeew

Well-Known Member

motek

злой как @

A-F

Well-Known Member

rhamdeew

Well-Known Member

motek

злой как @

BaNru

Пацифизжу

ArhAngel

Well-Known Member

motek

злой как @

BaNru

Пацифизжу

tigra60

Спасатель

ArhAngel

Well-Known Member

CamaroSS

Well-Known Member

A-F

Well-Known Member

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей